首页
所有分类
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源码分析-01总体架构分析
Nov 14 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
Jun 09 Javascript
限制复选框最多选择项的实现代码
May 30 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
Jun 14 Javascript
微信小程序 表单Form实例详解（附源码）
Dec 22 Javascript
微信小程序 地图map详解及简单实例
Jan 10 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
Feb 21 Javascript
详解vue2.0脚手架的webpack 配置文件分析
May 27 Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
Apr 20 Javascript
vue页面跳转实现页面缓存操作
Jul 22 Javascript
js实现炫酷光感效果
Sep 05 Javascript
Vue+Spring Boot简单用户登录(附Demo)
Nov 12 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
pip(1) Counter(1) Xpath(1) 抖音(1) binlog(2) LOGO(1) MIME(1) 写入策略(1) 爬虫(2) most_common(1)
You might like
php下清空字符串中的HTML标签的代码
2010/09/06 PHP
php实现把url转换迅雷thunder资源下载地址的方法
2014/11/07 PHP
彻底删除thinkphp3.1案例blog标签的方法
2014/12/05 PHP
php 的反射详解及示例代码
2016/08/25 PHP
php删除数组指定元素实现代码
2017/05/03 PHP
调试php程序的简单步骤
2019/10/04 PHP
JS option location 页面跳转实现代码
2008/12/27 Javascript
JavaScript的变量作用域深入理解
2009/10/25 Javascript
Javascript 二维数组
2009/11/26 Javascript
jQuery选中select控件 无法设置selected的解决方法
2010/09/01 Javascript
有趣的javascript数组定义方法
2010/09/10 Javascript
JavaScript随机排序(随即出牌)
2010/09/17 Javascript
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
2011/11/21 Javascript
jquery ready(fn)事件使用介绍
2013/08/21 Javascript
jQuery 滑动方法slideDown向下滑动元素
2014/01/16 Javascript
关于onchange事件在IE和FF下的表现及解决方法
2014/03/08 Javascript
js实现仿百度瀑布流的方法
2015/02/05 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
ionic2懒加载配置详解
2017/09/01 Javascript
一种angular的方法级的缓存注解（装饰器）
2018/03/13 Javascript
vue中锚点的三种方法
2018/07/06 Javascript
20多个小事例带你重温ES10新特性(小结)
2019/09/29 Javascript
[04:10]2016国际邀请赛中国区预选赛第二日TOP10精彩集锦
2016/06/28 DOTA
详解Swift中属性的声明与作用
2016/06/30 Python
Python使用pyshp库读取shapefile信息的方法
2018/12/29 Python
django实现用户注册实例讲解
2019/10/30 Python
用Python在Excel里画出蒙娜丽莎的方法示例
2020/04/28 Python
英国优质鞋类专家：Robinson’s Shoes
2017/12/08 全球购物
Brasty波兰：香水、化妆品、手表网上商店
2019/04/15 全球购物
求职推荐信
2013/10/28 职场文书
3D空间设计学生找工作的自我评价
2013/10/28 职场文书
应届中专生自荐书范文
2014/02/13 职场文书
祖国在我心中演讲稿400字
2014/05/04 职场文书
2014年个人业务工作总结
2014/11/17 职场文书
离婚民事起诉状
2015/08/03 职场文书
Python OpenCV超详细讲解读取图像视频和网络摄像头
2022/04/02 Python