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 相关文章推荐
splice slice区别
Oct 09 Javascript
JavaScript 输入框内容格式验证代码
Feb 11 Javascript
jquery刷新页面的实现代码(局部及全页面刷新)
Jul 11 Javascript
javascript的原生方法获取数组中的最大(最小)值
Dec 19 Javascript
onkeypress字符按键兼容所有浏览器使用介绍
Apr 24 Javascript
给文字加上着重号的JS代码
Nov 12 Javascript
js动态修改表格行colspan列跨度的方法
Mar 30 Javascript
用JavaScript实现让浏览器停止载入页面的方法
Jan 19 Javascript
jQuery实现遍历复选框的方法示例
Mar 06 Javascript
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
Jul 12 Javascript
javascript实现贪吃蛇游戏(娱乐版)
Aug 17 Javascript
Vue常用API、高级API的相关总结
Feb 02 Vue.js
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数据集构建JSON格式及新数组的方法
2012/11/07 PHP
jQuery Mobile + PHP实现文件上传
2014/12/12 PHP
php实现批量上传数据到数据库(.csv格式)的案例
2017/06/18 PHP
PHP-FPM的配置与优化讲解
2019/03/15 PHP
php设计模式之抽象工厂模式分析【星际争霸游戏案例】
2020/01/23 PHP
Laravel5.3+框架定义API路径取消CSRF保护方法详解
2020/04/06 PHP
类似框架的js代码
2006/11/09 Javascript
在线编辑器中换行与内容自动提取
2009/04/24 Javascript
JavaScript的public、private和privileged模式
2009/12/28 Javascript
JavaScript高级程序设计 错误处理与调试学习笔记
2011/09/10 Javascript
iframe里的页面禁止右键事件的方法
2014/06/10 Javascript
如何编写高质量JS代码
2014/12/28 Javascript
jquery ztree异步搜索(搜叶子)实践
2016/02/25 Javascript
JavaScript简单生成 N~M 之间随机数的方法
2017/01/13 Javascript
vue中实现滚动加载更多的示例
2017/11/08 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
2018/06/07 Javascript
基于vue实现一个禅道主页拖拽效果
2019/05/27 Javascript
JavaScript原型式继承实现方法
2019/11/06 Javascript
python实现的解析crontab配置文件代码
2014/06/30 Python
Python基于sftp及rsa密匙实现远程拷贝文件的方法
2016/09/21 Python
学习Python selenium自动化网页抓取器
2018/01/20 Python
selenium+python截图不成功的解决方法
2019/01/30 Python
基于python模拟TCP3次握手连接及发送数据
2020/11/06 Python
详解如何在css中引入自定义字体(font-face)
2018/05/17 HTML / CSS
html5 制作地图当前定位箭头的方法示例
2020/01/10 HTML / CSS
墨尔本最受欢迎的复古风格品牌:Princess Highway
2018/12/21 全球购物
荷兰的时尚市场:To Be Dressed
2019/05/06 全球购物
财务学生的职业生涯发展
2014/02/11 职场文书
大学优秀班主任事迹材料
2014/05/02 职场文书
教师教学评估方案
2014/05/09 职场文书
党员教师自我剖析材料
2014/09/29 职场文书
买卖合同协议书范本
2014/10/18 职场文书
交通事故赔偿起诉书
2015/05/20 职场文书
大学毕业生自我鉴定范文
2019/06/21 职场文书
python随机打印成绩排名表
2021/06/23 Python
SQL实现LeetCode(176.第二高薪水)
2021/08/04 MySQL