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 相关文章推荐
完美解决JS中汉字显示乱码问题(已解决)
Dec 27 Javascript
top.location.href 没有权限 解决方法
Aug 05 Javascript
25个好玩的JavaScript小游戏分享
Apr 22 Javascript
js判断屏幕分辨率的代码
Jul 16 Javascript
js jq 单击和双击区分示例介绍
Nov 05 Javascript
简单谈谈javascript中的变量、作用域和内存问题
Aug 30 Javascript
js实现手机拍照上传功能
Jan 17 Javascript
ExtJs异步无法向外传值和赋值的完美解决办法
Jun 14 Javascript
ES6深入理解之“let”能替代”var“吗?
Jun 28 Javascript
ES6下子组件调用父组件的方法(推荐)
Feb 23 Javascript
angularjs1.5 组件内用函数向外传值的实例
Sep 30 Javascript
如何实现js拖拽效果及原理解析
May 08 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
BBS(php &amp; mysql)完整版(二)
2006/10/09 PHP
php图片处理:加水印、缩略图的实现(自定义函数:watermark、thumbnail)
2010/12/02 PHP
PHP执行zip与rar解压缩方法实现代码
2010/12/05 PHP
PHP学习笔记之数组篇
2011/06/28 PHP
ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单
2014/05/15 PHP
深入讲解PHP Session及如何保持其不过期的方法
2015/08/18 PHP
php连接mysql之mysql_connect()与mysqli_connect()的区别
2020/07/19 PHP
Javascript连接多个数组不用concat来解决
2014/03/24 Javascript
ActiveX控件与Javascript之间的交互示例
2014/06/04 Javascript
thinkphp 表名 大小写 窍门
2015/02/01 Javascript
浅析Javascript的自动分号插入(ASI)机制
2016/09/29 Javascript
CentOS 安装NodeJS V8.0.0的方法
2017/06/15 NodeJs
JavaScript脚本语言是什么_动力节点Java学院整理
2017/06/26 Javascript
Vue2.0权限树组件实现代码
2017/08/29 Javascript
JavaScript表单即时验证 验证不成功不能提交
2017/08/31 Javascript
Angular 5.0 来了! 有这些大变化
2017/11/15 Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
2018/01/30 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
2020/07/23 Javascript
基于Vant UI框架实现时间段选择器
2020/12/24 Javascript
python使用cookielib库示例分享
2014/03/03 Python
浅谈Python实现2种文件复制的方法
2018/01/19 Python
python数字图像处理之骨架提取与分水岭算法
2018/04/27 Python
儿童python练习实例
2018/05/27 Python
PyCharm的设置方法和第一个Python程序的建立
2019/01/16 Python
Python和Java的语法对比分析语法简洁上python的确完美胜出
2019/05/10 Python
python 获取sqlite3数据库的表名和表字段名的实例
2019/07/17 Python
Python字典添加,删除,查询等相关操作方法详解
2020/02/07 Python
python不到50行代码完成了多张excel合并的实现示例
2020/05/28 Python
简单了解如何封装自己的Python包
2020/07/08 Python
了解AppleShare protocol(AppleShare协议)吗
2015/08/28 面试题
运动会入场解说词300字
2014/01/25 职场文书
餐厅销售主管职责范本
2014/02/19 职场文书
企业办公室岗位职责
2014/03/12 职场文书
关于安全的演讲稿
2014/05/09 职场文书
2015年教务主任工作总结
2015/07/22 职场文书
如何使用Python对NetCDF数据做空间相关分析
2021/04/21 Python