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得到XML某节点的子节点个数的脚本
Oct 11 Javascript
JavaScript 检测浏览器和操作系统的脚本
Dec 26 Javascript
js控制input框只读实现示例
Jan 20 Javascript
AngularJS表单验证中级篇(3)
Sep 28 Javascript
bootstrap如何让dropdown menu按钮式下拉框长度一致
Apr 10 Javascript
JS中正则表达式要注意lastIndex属性
Aug 08 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
Sep 14 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
Sep 04 Javascript
javascript中join方法实例讲解
Feb 21 Javascript
如何实现一个简易版的vuex持久化工具
Sep 11 Javascript
Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码
May 18 Javascript
仿照Element-ui实现一个简易的$message方法
Sep 14 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
phpMyAdmin 安装教程全攻略
2007/03/19 PHP
php 分页类 扩展代码
2009/06/11 PHP
利用Memcached在php下实现session机制 替换PHP的原生session支持
2010/08/21 PHP
零基础php编程好学吗
2019/10/11 PHP
CheckBox 如何实现全选?
2006/06/23 Javascript
用jscript实现列出安装的软件列表
2007/06/18 Javascript
用JavaScript实现使用鼠标画线的示例代码
2014/08/19 Javascript
扒一扒JavaScript 预解释
2015/01/28 Javascript
常用的JavaScript模板引擎介绍
2015/02/28 Javascript
在JavaScript中处理时间之getHours()方法的使用
2015/06/10 Javascript
jquery自定义插件——window的实现【示例代码】
2016/05/06 Javascript
基于jQuery倒计时插件实现团购秒杀效果
2016/05/13 Javascript
Vue实现点击后文字变色切换方法
2018/02/11 Javascript
vue内置指令详解
2018/04/03 Javascript
webpack 从指定入口文件中提取公共文件的方法
2018/11/13 Javascript
vue router动态路由设置参数可选问题
2019/08/21 Javascript
JS中数组实现代码(倒序遍历数组,数组连接字符串)
2019/12/29 Javascript
详解elementUI中input框无法输入的问题
2020/04/27 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
2020/07/17 Javascript
Python 过滤字符串的技巧,map与itertools.imap
2008/09/06 Python
Python的Django框架中消息通知的计数器实现教程
2016/06/13 Python
Django项目实战之用户头像上传与访问的示例
2018/04/21 Python
从运行效率与开发效率比较Python和C++
2018/12/14 Python
python二进制文件的转译详解
2019/07/03 Python
Django实现网页分页功能
2019/10/31 Python
简单了解Python write writelines区别
2020/02/27 Python
Tkinter中复选菜单是否被选中的判断与设置方式
2020/03/04 Python
python如何用matplotlib创建三维图表
2021/01/26 Python
localStorage的过期时间设置的方法详解
2018/11/26 HTML / CSS
HTML5 播放 RTSP 视频的实例代码
2019/07/29 HTML / CSS
Alba Moda瑞士网上商店:独家意大利时尚女装销售
2016/11/28 全球购物
Edwaybuy西班牙:小米在线商店
2019/12/04 全球购物
高三语文教学反思
2014/01/15 职场文书
教师“一帮一”结对子活动总结
2015/05/07 职场文书
2016校本研修培训心得体会
2016/01/08 职场文书
使用logback实现按自己的需求打印日志到自定义的文件里
2021/08/30 Java/Android