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显示用户停留时间的简单实例
Aug 05 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
Feb 23 Javascript
jQuery实现购物车表单自动结算效果实例
Aug 10 Javascript
移动手机APP手指滑动切换图片特效附源码下载
Nov 30 Javascript
Bootstrap表单布局样式代码
May 31 Javascript
JS实现的表格行上下移动操作示例
Aug 03 Javascript
Node.js连接postgreSQL并进行数据操作
Dec 18 Javascript
bootstrap datetimepicker日期插件使用方法
Jan 13 Javascript
在Mac下彻底卸载node和npm的方法
May 16 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
Oct 20 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
Dec 23 Javascript
vue element-ui之怎么封装一个自己的组件的详解
May 20 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学习之PHP运算符
2006/10/09 PHP
不用数据库的多用户文件自由上传投票系统(3)
2006/10/09 PHP
smarty模板引擎中自定义函数的方法
2015/01/22 PHP
php similar_text()函数的定义和用法
2016/05/12 PHP
php实现网页端验证码功能
2017/07/11 PHP
Javascript注入技巧
2007/06/22 Javascript
javascript 兼容鼠标滚轮事件
2009/04/07 Javascript
jQuery去掉字符串起始和结尾的空格(多种方法实现)
2013/04/01 Javascript
利用ajaxfileupload插件实现文件上传无刷新的具体方法
2013/06/08 Javascript
jQuery插件开发详细教程
2014/06/06 Javascript
node.js中的fs.utimesSync方法使用说明
2014/12/15 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
2015/08/21 Javascript
json+jQuery实现的无限级树形菜单效果代码
2015/08/27 Javascript
bootstrap-treeview自定义双击事件实现方法
2016/01/09 Javascript
js简单判断移动端系统的方法
2016/02/25 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
2016/06/20 Javascript
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
2017/02/23 Javascript
利用node实现一个批量重命名文件的函数
2017/12/21 Javascript
JS获取当前时间的实例代码(昨天、今天、明天)
2018/11/13 Javascript
vue组件之间的数据传递方法详解
2019/04/19 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
2019/08/20 Javascript
解析vue、angular深度作用选择器
2019/09/11 Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
2020/06/16 Javascript
js实现磁性吸附的示例
2020/10/26 Javascript
[15:28]DOTA2 HEROS教学视频教你分分钟做大人-剧毒术士
2014/06/13 DOTA
Python开发编码规范
2006/09/08 Python
Python读大数据txt
2016/03/28 Python
Python django框架应用中实现获取访问者ip地址示例
2019/05/17 Python
详解python实现交叉验证法与留出法
2019/07/11 Python
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
2019/07/09 HTML / CSS
用友笔试题目
2016/10/25 面试题
简单的大学生自我鉴定
2014/02/18 职场文书
社会学专业求职信
2014/02/24 职场文书
售后求职信范文
2014/03/15 职场文书
2014企业领导班子四风对照检查材料思想汇报
2014/09/17 职场文书
2014年路政工作总结
2014/12/10 职场文书