jQuery+ajax简单实现文件上传的方法


Posted in Javascript onJune 03, 2016

本文实例讲述了jQuery+ajax简单实现文件上传的方法。分享给大家供大家参考,具体如下:

可以通过ajax来提交表单,而不会刷新页面。主要使用的方法是 $("#formID").ajaxSubmit()方法

1、要引入js插件

需要下载的附件:jquery.form.js

2、页面代码:

<script src="project/js/jquery.form.js" type="text/javascript"></script>
<script src="project/js/fileload.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
createHtml($("#str"));
})
</script>
<tr>
<td>图片</td>
<td>
<div id="str">
</div>
<p style="display: none;" id="timgUrl"></p>
<p style="color: red" id="timgok"></p>
<img id="backImgUrl" src="@Model.ImageUrl" style="width:300px; height:200px;" /></td>
</tr>
<script src="~/project/js/jquery.form.js" type="text/javascript"></script>
<script src="~/project/js/fileload.js" type="text/javascript"></script>

fileload.js:

function fileloadon() {
$("#msg").html("");
$("#_fileForm").submit(function () {
$("#_fileForm").ajaxSubmit({
type: "post",
url: "/201410CarVideoAdmin/Home/UploadHelper",
success: function (data1) {
$('#timgUrl').html(data1);
var reg = new RegExp('"', "g");
var imageUrl = $('#timgUrl').text().replace(reg, "");
$('#backImgUrl').attr("src", imageUrl);
if ($('#timgUrl').html() != null) {
$('#timgok').html("文件上传成功");
} else {
$('#timgok').html("文件上传失败");
}
},
error: function (msg) {
alert("文件上传失败");
}
});
return false;
});
$("#_fileForm").submit();
}

Controller Code:

[HttpPost]
public ActionResult UploadHelper()
{
//开始上传
string imageUrl = string.Empty;
QF.WebGamePlatform.Reference.FileUploadService service = new QF.WebGamePlatform.Reference.FileUploadService();
var fileResult = service.PicUpLoad(Request.Files[0]);
if (fileResult.Code == 0)
{
imageUrl = fileResult.Data.RawImageUrl;
}
return Json(imageUrl, JsonRequestBehavior.AllowGet);
}

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
javascript removeChild 使用注意事项
Apr 11 Javascript
js操作checkbox遇到的问题解决
Jun 29 Javascript
JavaScript中json使用自己总结
Aug 13 Javascript
使用jquery实现放大镜效果
Sep 02 Javascript
js的[defer]和[async]属性
Nov 24 Javascript
js读取csv文件并使用json显示出来
Jan 09 Javascript
canvas压缩图片转换成base64格式输出文件流
Mar 09 Javascript
js自定义弹框插件的封装
Aug 24 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
Feb 09 Javascript
浅谈手写node可读流之流动模式
Jun 01 Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
Jul 31 Javascript
JS遍历树层级关系实现原理解析
Aug 31 Javascript
JS使用eval()动态创建变量的方法
Jun 03 #Javascript
jQuery插件编写步骤详解
Jun 03 #Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
Jun 03 #Javascript
JSON字符串转换JSONObject和JSONArray的方法
Jun 03 #Javascript
JS判断字符串变量是否含有某个字串的实现方法
Jun 03 #Javascript
JavaScript闭包实例详解
Jun 03 #Javascript
js判断某个字符出现的次数的简单实例
Jun 03 #Javascript
You might like
php 破解防盗链图片函数
2008/12/09 PHP
php 获取客户端的真实ip
2009/11/30 PHP
基于PHP一些十分严重的缺陷详解
2013/06/03 PHP
变量在 PHP7 内部的实现(二)
2015/12/21 PHP
什么是PHP文件?如何打开PHP文件?
2017/06/27 PHP
使用Zookeeper分布式部署PHP应用程序
2019/03/15 PHP
ThinkPHP框架实现FTP图片上传功能示例
2019/04/08 PHP
不要在cookie中使用特殊字符的原因分析
2010/07/13 Javascript
Javascript合并表格中具有相同内容单元格示例
2013/08/11 Javascript
js弹出层永远居中实现思路及代码
2013/11/29 Javascript
js解析json读取List中的实体对象示例
2014/03/11 Javascript
关于Javascript 对象(object)的prototype
2014/05/09 Javascript
javascript实现随时变化着的背景颜色
2015/04/02 Javascript
js实现鼠标划过给div加透明度的方法
2015/05/25 Javascript
深入理解JavaScript中Ajax
2016/08/02 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
2020/03/26 Javascript
webpack 模块热替换原理
2018/04/09 Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
2019/02/22 Javascript
通过js随机函数Math.random实现乱序
2020/05/19 Javascript
JS数组及对象遍历方法代码汇总
2020/06/16 Javascript
在Vue中使用antv的示例代码
2020/06/29 Javascript
VUE前端从后台请求过来的数据进行转换数据结构操作
2020/11/11 Javascript
Django用户认证系统 组与权限解析
2019/08/02 Python
Django错误:TypeError at / 'bool' object is not callable解决
2019/08/16 Python
pandas按照列的值排序(某一列或者多列)
2020/12/13 Python
详解python3 GUI刷屏器(附源码)
2021/02/18 Python
Seavenger官网:潜水服、浮潜、靴子和袜子
2020/03/05 全球购物
自我反省检讨书
2014/01/23 职场文书
平安工地汇报材料
2014/08/19 职场文书
有限公司股东合作协议书
2014/10/29 职场文书
公务员检讨书
2014/11/01 职场文书
三八节活动主持词
2015/07/04 职场文书
运动员代表致辞
2015/07/29 职场文书
Mysql数据库按时间点恢复实战记录
2021/06/30 MySQL
使用CSS设置滚动条样式
2022/01/18 HTML / CSS
win10如何开启ahci模式?win10开启ahci模式详细操作教程
2022/07/23 数码科技