首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jQuery插件ajaxFileUpload使用详解

Posted in Javascript onJanuary 10, 2017

ajaxFileUpload.js 很多同名的，因为做出来一个很容易。

我用的是这个：https://github.com/carlcarl/AjaxFileUpload

下载地址在这里：http://xiazai.3water.com/201701/yuanma/ajaxfileupload(3water.com).rar

AjaxFileUpload.js并不是一个很出名的插件，只是别人写好的放出来供大家用，原理都是创建隐藏的表单和iframe然后用JS去提交，获得返回值。

当初做了个异步上传的功能，选择它因为它的配置方式比较像jQuery的AJAX，我很喜欢。

评论里面说到的不行。那是因为我们用的不是同一个js。我上github搜AjaxFileUpload出来很多类似js。

ajaxFileUpload是一个异步上传文件的jQuery插件。

传一个不知道什么版本的上来，以后不用到处找了。

语法：$.ajaxFileUpload([options])

options参数说明：

1、url

  上传处理程序地址。

2、fileElementId

　  需要上传的文件域的ID，即<input type="file">的ID。
3、secureuri

　 是否启用安全提交，默认为false。
4、dataType

　 服务器返回的数据类型。可以为xml,script,json,html。如果不填写，jQuery会自动判断。
5、success

提交成功后自动执行的处理函数，参数data就是服务器返回的数据。
6、error

　 提交失败自动执行的处理函数。
7、data

　 自定义参数。这个东西比较有用，当有数据是与上传的图片相关的时候，这个东西就要用到了。
8、 type

　  当要提交自定义参数时，这个参数要设置成post

错误提示:

1、SyntaxError: missing ; before statement错误

如果出现这个错误就需要检查url路径是否可以访问

2、SyntaxError: syntax error错误

如果出现这个错误就需要检查处理提交操作的服务器后台处理程序是否存在语法错误

3、SyntaxError: invalid property id错误

如果出现这个错误就需要检查文本域属性ID是否存在

4、SyntaxError: missing } in XML expression错误

如果出现这个错误就需要检查文件name是否一致或不存在

5、其它自定义错误

大家可使用变量$error直接打印的方法检查各参数是否正确，比起上面这些无效的错误提示还是方便很多。

使用方法：

第一步：先引入jQuery与ajaxFileUpload插件。注意先后顺序，这个不用说了，所有的插件都是这样。

<script src="jquery-1.7.1.js" type="text/javascript"></script>
<script src="ajaxfileupload.js" type="text/javascript"></script>

第二步：HTML代码：

<body>
 <p><input type="file" id="file1" name="file" /></p>
 <input type="button" value="上传" />
 <p><img id="img1" alt="上传成功啦" src="" /></p>
</body>

第三步：JS代码

<script src="jquery-1.7.1.js" type="text/javascript"></script>
 <script src="ajaxfileupload.js" type="text/javascript"></script>
 <script type="text/javascript">
 $(function () {
 $(":button").click(function () {
 ajaxFileUpload();
 })
 })
 function ajaxFileUpload() {
 $.ajaxFileUpload
 (
 {
  url: '/upload.aspx', //用于文件上传的服务器端请求地址
  secureuri: false, //是否需要安全协议，一般设置为false
  fileElementId: 'file1', //文件上传域的ID
  dataType: 'json', //返回值类型 一般设置为json
  success: function (data, status) //服务器成功响应处理函数
  {
  $("#img1").attr("src", data.imgurl);
  if (typeof (data.error) != 'undefined') {
  if (data.error != '') {
  alert(data.error);
  } else {
  alert(data.msg);
  }
  }
  },
  error: function (data, status, e)//服务器响应失败处理函数
  {
  alert(e);
  }
 }
 )
 return false;
 }
 </script>

第四步：后台页面upload.aspx代码：

protected void Page_Load(object sender, EventArgs e)
 {
 HttpFileCollection files = Request.Files;
 string msg = string.Empty;
 string error = string.Empty;
 string imgurl;
 if (files.Count > 0)
 {
 files[0].SaveAs(Server.MapPath("/") + System.IO.Path.GetFileName(files[0].FileName));
 msg = " 成功! 文件大小为:" + files[0].ContentLength;
 imgurl = "/" + files[0].FileName;
 string res = "{ error:'" + error + "', msg:'" + msg + "',imgurl:'" + imgurl + "'}";
 Response.Write(res);
 Response.End();
 }
 }

本实例完整代码下载

来一个MVC版本的实例：

控制器代码

public class HomeController : Controller
 {
 public ActionResult Index()
 {
 return View();
 }

 public ActionResult Upload()
 {
 HttpFileCollection hfc = System.Web.HttpContext.Current.Request.Files;
 string imgPath = "";
 if (hfc.Count > 0)
 {
 imgPath = "/testUpload" + hfc[0].FileName;
 string PhysicalPath = Server.MapPath(imgPath);
 hfc[0].SaveAs(PhysicalPath);
 }
 return Content(imgPath);
 }
 }

前端视图，HTML与JS代码，成功上传后，返回图片真实地址并绑定到<img>的SRC地址

<html>
<head>
 <script src="/jquery-1.7.1.js" type="text/javascript"></script>
 <script src="/ajaxfileupload.js" type="text/javascript"></script>
 <script type="text/javascript">
 $(function () {
 $(":button").click(function () {
 if ($("#file1").val().length > 0) {
  ajaxFileUpload();
 }
 else {
  alert("请选择图片");
 }
 })
 })
 function ajaxFileUpload() {
 $.ajaxFileUpload
 (
 {
  url: '/Home/Upload', //用于文件上传的服务器端请求地址
  secureuri: false, //一般设置为false
  fileElementId: 'file1', //文件上传空间的id属性 <input type="file" id="file" name="file" />
  dataType: 'HTML', //返回值类型 一般设置为json
  success: function (data, status) //服务器成功响应处理函数
  {
  alert(data);
  $("#img1").attr("src", data);
  if (typeof (data.error) != 'undefined') {
  if (data.error != '') {
  alert(data.error);
  } else {
  alert(data.msg);
  }
  }
  },
  error: function (data, status, e)//服务器响应失败处理函数
  {
  alert(e);
  }
 }
 )
 return false;
 }
 </script>
</head>
<body>
 <p><input type="file" id="file1" name="file" /></p>
 <input type="button" value="上传" />
 <p><img id="img1" alt="上传成功啦" src="" /></p>
</body>
</html>

 最后再来一个上传图片且附带参数的实例：控制器代码：

public class HomeController : Controller
 {
 public ActionResult Index()
 {
 return View();
 }

 public ActionResult Upload()
 {
 NameValueCollection nvc = System.Web.HttpContext.Current.Request.Form;

 HttpFileCollection hfc = System.Web.HttpContext.Current.Request.Files;
 string imgPath = "";
 if (hfc.Count > 0)
 {
 imgPath = "/testUpload" + hfc[0].FileName;
 string PhysicalPath = Server.MapPath(imgPath);
 hfc[0].SaveAs(PhysicalPath);
 }
 //注意要写好后面的第二第三个参数
 return Json(new { Id = nvc.Get("Id"), name = nvc.Get("name"), imgPath1 = imgPath },"text/html", JsonRequestBehavior.AllowGet);
 }
 }

Index视图代码:

<html>
<head>
 <script src="/jquery-1.7.1.js" type="text/javascript"></script>
 <script src="/ajaxfileupload.js" type="text/javascript"></script>
 <script type="text/javascript">
 $(function () {
 $(":button").click(function () {
 if ($("#file1").val().length > 0) {
  ajaxFileUpload();
 }
 else {
  alert("请选择图片");
 }
 })
 })
 function ajaxFileUpload() {
 $.ajaxFileUpload
 (
 {
  url: '/Home/Upload', //用于文件上传的服务器端请求地址
  type: 'post',
  data: { Id: '123', name: 'lunis' }, //此参数非常严谨，写错一个引号都不行
  secureuri: false, //一般设置为false
  fileElementId: 'file1', //文件上传空间的id属性 <input type="file" id="file" name="file" />
  dataType: 'json', //返回值类型 一般设置为json
  success: function (data, status) //服务器成功响应处理函数
  {
  alert(data);
  $("#img1").attr("src", data.imgPath1);
  alert("你请求的Id是" + data.Id + " " + "你请求的名字是:" + data.name);
  if (typeof (data.error) != 'undefined') {
  if (data.error != '') {
  alert(data.error);
  } else {
  alert(data.msg);
  }
  }
  },
  error: function (data, status, e)//服务器响应失败处理函数
  {
  alert(e);
  }
 }
 )
 return false;
 }
 </script>
</head>
<body>
 <p><input type="file" id="file1" name="file" /></p>
 <input type="button" value="上传" />
 <p><img id="img1" alt="上传成功啦" src="" /></p>
</body>
</html>

此实例在显示出异步上传图片的同时并弹出自定义传输的参数。本实例下载地址

2013年1月28日，今天调试过程中发现一个问题，就是作为文件域(<input type="file">)必须要有name属性，如果没有name属性，上传之后服务器是获取不到图片的。如：正确的写法是<input type="file" id="file1" name="file1" />

2013年1月28日，最经典的错误终于找到原因所在了。Object function (a,b){return new e.fn.init(a,b,h)} has no method 'handleError'，这个是google浏览器报的错误，非常经典， 不知道是我的版本问题还是真正存在的问题。这个问题的根源经过N次上传才找到问题的根本所在。答案是：dataType参数一定要大写。如：dataType: 'HTML'。

2016-07-28，评论中的一个错误：TypeError: $.ajaxFileUpload is not a function   我们用的不是同一个JS，你下了别的AJAXFileUpload去了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

jQuery插件ajaxFileUpload使用详解

- Author -

Denghejing

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Jquery Ajax.ashx 高效分页实现代码
Oct 20 Javascript
了解一点js的Eval函数
Jul 26 Javascript
jquery 插件学习（五）
Aug 06 Javascript
浅谈JavaScript之事件绑定
Jul 08 Javascript
js动态添加onclick事件可传参数与不传参数
Jul 29 Javascript
JS数组的遍历方式for循环与for...in
Jul 31 Javascript
js为什么不能正确处理小数运算？
Dec 29 Javascript
Node.js中防止错误导致的进程阻塞的方法
Aug 11 Javascript
AngularJS通过$location获取及改变当前页面的URL
Sep 23 Javascript
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
微信小程序实现简单表格
Feb 14 Javascript
微信小程序实现列表的横向滑动方式
Jul 15 Javascript
微信小程序 Button 组件详解及简单实例
Jan 10 #Javascript
jQuery zTree树插件简单使用教程
Jan 10 #Javascript
详解JS中的快速排序与冒泡
Jan 10 #Javascript
BootStrapTable 单选及取值的实现方法
Jan 10 #Javascript
VueJs路由跳转——vue-router的使用详解
Jan 10 #Javascript
js自定义QQ菜单效果
Jan 10 #Javascript
js实现将json数组显示前台table中
Jan 10 #Javascript
子查询(1) create(1) Windows server 2012(17)  AD域(1) 日志格式分析(1) Mybatis-Plus(3) mounted(1) nginx(76) 组策略(1) TableField(1)
You might like
2019年中国咖啡业现状与发展趋势
2021/03/04 咖啡文化
smarty模板引擎从配置文件中获取数据的方法
2015/01/22 PHP
php从身份证获取性别和出生年月
2017/02/09 PHP
PHP实现浏览器格式化显示XML的方法示例
2019/01/22 PHP
js中几种去掉字串左右空格的方法
2006/12/25 Javascript
传智播客学习之JavaScript基础篇
2009/11/13 Javascript
在浏览器中获取当前执行的脚本文件名的代码
2011/07/19 Javascript
javascript动态加载二
2012/08/22 Javascript
js的window.showModalDialog及window.open用法实例分析
2015/01/29 Javascript
JS设置cookie、读取cookie
2016/02/24 Javascript
JavaScript异步上传图片文件的实例代码
2017/07/04 Javascript
详解vue渲染从后台获取的json数据
2017/07/06 Javascript
js canvas实现简单的图像扩散效果
2020/06/28 Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
2018/09/11 Javascript
layui的面包屑或者表单不显示的解决方法
2019/09/05 Javascript
详解Python中的循环语句的用法
2015/04/09 Python
python计算文本文件行数的方法
2015/07/06 Python
python的Crypto模块实现AES加密实例代码
2018/01/22 Python
Python实现统计给定字符串中重复模式最高子串功能示例
2018/05/16 Python
Python实现的ftp服务器功能详解【附源码下载】
2019/06/26 Python
python实现两张图片拼接为一张图片并保存
2019/07/16 Python
python 用户交互输入input的4种用法详解
2019/09/24 Python
Django和Flask框架优缺点对比
2019/10/24 Python
css3实例教程 一款纯css3实现的环形导航菜单
2014/10/20 HTML / CSS
New Balance天猫官方旗舰店：始于1906年，百年慢跑品牌
2017/11/15 全球购物
ABOUT YOU匈牙利：500个最受欢迎的时尚品牌
2019/07/19 全球购物
求职信内容考虑哪几点
2013/10/05 职场文书
副董事长岗位职责
2014/04/02 职场文书
小学生操行评语大全
2014/04/22 职场文书
病媒生物防治方案
2014/05/13 职场文书
单位作风建设剖析材料
2014/10/11 职场文书
写给老师的感谢信
2015/01/20 职场文书
中学生学习保证书
2015/02/26 职场文书
优秀党员主要事迹范文
2015/11/05 职场文书
聊聊基于pytorch实现Resnet对本地数据集的训练问题
2022/03/25 Python
openstack云计算keystone组件工作介绍
2022/04/20 Servers