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 html 静态页面传参数
Apr 10 Javascript
JS控件的生命周期介绍
Oct 22 Javascript
Flexigrid在IE下不显示数据的有效处理方法
Sep 04 Javascript
JS鼠标拖拽实例分析
Nov 23 Javascript
HTML5 canvas 9绘制图片实例详解
Sep 06 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
Oct 28 Javascript
JS简单生成随机数(随机密码)的方法
May 11 Javascript
BootStrap的双日历时间控件使用
Jul 25 Javascript
Vue路由history模式解决404问题的几种方法
Sep 29 Javascript
Vue实现开心消消乐游戏算法
Oct 22 Javascript
js实现橱窗展示效果
Jan 11 Javascript
js实现限定范围拖拽的示例
Oct 26 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
一些花式咖啡的配方
2021/03/03 冲泡冲煮
php中global和$GLOBALS[]的分析之一
2012/02/02 PHP
PHP实例分享判断客户端是否使用代理服务器及其匿名级别
2014/06/04 PHP
PHP实现用户异地登录提醒功能的方法【基于thinkPHP框架】
2018/03/15 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
Nigma vs AM BO3 第一场2.13
2021/03/10 DOTA
ExtJS 2.0实用简明教程 之Ext类库简介
2009/04/29 Javascript
JavaScript 嵌套函数指向this对象错误的解决方法
2010/03/15 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
2013/03/12 Javascript
jquery操作select详解(取值,设置选中)
2014/02/07 Javascript
用jquery模仿的a的title属性的例子
2014/10/22 Javascript
Javascript中引用类型传递的知识点小结
2017/03/06 Javascript
Vue项目组件化工程开发实践方案
2018/01/09 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
2018/03/16 Javascript
vue项目中使用百度地图的方法
2018/06/08 Javascript
前端性能优化建议
2020/09/17 Javascript
[38:21]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS Newbee
2018/03/31 DOTA
python文件读写操作与linux shell变量命令交互执行的方法
2015/01/14 Python
python内存管理分析
2015/04/08 Python
Python3.2中的字符串函数学习总结
2015/04/23 Python
Python AES加密模块用法分析
2017/05/22 Python
Python在字符串中处理html和xml的方法
2020/07/31 Python
CSS3 Backgrounds属性相关介绍
2011/05/11 HTML / CSS
HTML5 拖放(Drag 和 Drop)详解与实例代码
2017/09/14 HTML / CSS
努比亚手机官网:nubia
2016/10/06 全球购物
一套C++笔试题面试题
2012/06/06 面试题
教师年终个人自我评价
2013/10/04 职场文书
自我评价中英文语句
2013/11/30 职场文书
运动会广播稿300字
2014/01/10 职场文书
石油大学毕业生自荐信
2014/01/28 职场文书
保险专业自荐信范文
2014/02/20 职场文书
2015年学校保卫部工作总结
2015/05/11 职场文书
优质服务标语口号
2015/12/26 职场文书
python 如何将两个实数矩阵合并为一个复数矩阵
2021/05/19 Python
前端JavaScript大管家 package.json
2021/11/02 Javascript
漫画「日和酱的要求是绝对的」第3卷封面公开
2022/03/21 日漫