转载：https://www.cnblogs.com/labimeilexin/p/6742647.html

jQuery插件之ajaxFileUpload

 
 

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

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

下载地址在这里：http://files.cnblogs.com/files/kissdodog/ajaxfileupload_JS_File.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插件。注意先后顺序，这个不用说了，所有的插件都是这样。

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

　　第二步：HTML代码：

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

　　第三步：JS代码

  1.     <script src="jquery-1.7.1.js" type="text/javascript"></script>
  2.     <script src="ajaxfileupload.js" type="text/javascript"></script>
  3.     <script type="text/javascript">
  4.         $(function () {
  5.             $(":button").click(function () {
  6.                 ajaxFileUpload();
  7.             })
  8.         })
  9.         function ajaxFileUpload() {
  10.             $.ajaxFileUpload
  11.             (
  12.                 {
  13.                     url: '/upload.aspx', //用于文件上传的服务器端请求地址
  14.                     secureuri: false, //是否需要安全协议，一般设置为false
  15.                     fileElementId: 'file1', //文件上传域的ID
  16.                     dataType: 'json', //返回值类型 一般设置为json
  17.                     success: function (data, status)  //服务器成功响应处理函数
  18.                     {
  19.                         $("#img1").attr("src", data.imgurl);
  20.                         if (typeof (data.error) != 'undefined') {
  21.                             if (data.error != '') {
  22.                                 alert(data.error);
  23.                             } else {
  24.                                 alert(data.msg);
  25.                             }
  26.                         }
  27.                     },
  28.                     error: function (data, status, e)//服务器响应失败处理函数
  29.                     {
  30.                         alert(e);
  31.                     }
  32.                 }
  33.             )
  34.             return false;
  35.         }
  36.     </script>

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

  1.         protected void Page_Load(object sender, EventArgs e)
  2.         {
  3.             HttpFileCollection files = Request.Files;
  4.             string msg = string.Empty;
  5.             string error = string.Empty;
  6.             string imgurl;
  7.             if (files.Count > 0)
  8.             {
  9.                 files[0].SaveAs(Server.MapPath("/") + System.IO.Path.GetFileName(files[0].FileName));
  10.                 msg = " 成功! 文件大小为:" + files[0].ContentLength;
  11.                 imgurl = "/" + files[0].FileName;
  12.                 string res = "{ error:'" + error + "', msg:'" + msg + "',imgurl:'" + imgurl + "'}";
  13.                 Response.Write(res);
  14.                 Response.End();
  15.             }
  16.         }

　　本实例完整代码下载

来一个MVC版本的实例：

控制器代码

  1.     public class HomeController : Controller
  2.     {
  3.         public ActionResult Index()
  4.         {
  5.             return View();
  6.         }
  7.  
  8.         public ActionResult Upload()
  9.         {
  10.             HttpFileCollection hfc = System.Web.HttpContext.Current.Request.Files;
  11.             string imgPath = "";
  12.             if (hfc.Count > 0)
  13.             {
  14.                 imgPath = "/testUpload" + hfc[0].FileName;
  15.                 string PhysicalPath = Server.MapPath(imgPath);
  16.                 hfc[0].SaveAs(PhysicalPath);
  17.             }
  18.             return Content(imgPath);
  19.         }
  20.     }

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

  1. <html>
  2. <head>
  3.     <script src="/jquery-1.7.1.js" type="text/javascript"></script>
  4.     <script src="/ajaxfileupload.js" type="text/javascript"></script>
  5.     <script type="text/javascript">
  6.         $(function () {
  7.             $(":button").click(function () {
  8.                 if ($("#file1").val().length > 0) {
  9.                     ajaxFileUpload();
  10.                 }
  11.                 else {
  12.                     alert("请选择图片");
  13.                 }
  14.             })
  15.         })
  16.         function ajaxFileUpload() {
  17.             $.ajaxFileUpload
  18.             (
  19.                 {
  20.                     url: '/Home/Upload', //用于文件上传的服务器端请求地址
  21.                     secureuri: false, //一般设置为false
  22.                     fileElementId: 'file1', //文件上传空间的id属性  <input type="file" id="file" name="file" />
  23.                     dataType: 'HTML', //返回值类型 一般设置为json
  24.                     success: function (data, status)  //服务器成功响应处理函数
  25.                     {
  26.                         alert(data);
  27.                         $("#img1").attr("src", data);
  28.                         if (typeof (data.error) != 'undefined') {
  29.                             if (data.error != '') {
  30.                                 alert(data.error);
  31.                             } else {
  32.                                 alert(data.msg);
  33.                             }
  34.                         }
  35.                     },
  36.                     error: function (data, status, e)//服务器响应失败处理函数
  37.                     {
  38.                         alert(e);
  39.                     }
  40.                 }
  41.             )
  42.             return false;
  43.         }
  44.     </script>
  45. </head>
  46. <body>
  47.     <p><input type="file" id="file1" name="file" /></p>
  48.     <input type="button" value="上传" />
  49.     <p><img id="img1" alt="上传成功啦" src="" /></p>
  50. </body>
  51. </html>

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

  1.     public class HomeController : Controller
  2.     {
  3.         public ActionResult Index()
  4.         {
  5.             return View();
  6.         }
  7.  
  8.         public ActionResult Upload()
  9.         {
  10.             NameValueCollection nvc = System.Web.HttpContext.Current.Request.Form;
  11.  
  12.             HttpFileCollection hfc = System.Web.HttpContext.Current.Request.Files;
  13.             string imgPath = "";
  14.             if (hfc.Count > 0)
  15.             {
  16.                 imgPath = "/testUpload" + hfc[0].FileName;
  17.                 string PhysicalPath = Server.MapPath(imgPath);
  18.                 hfc[0].SaveAs(PhysicalPath);
  19.             }
  20.             //注意要写好后面的第二第三个参数
  21.             return Json(new { Id = nvc.Get("Id"), name = nvc.Get("name"), imgPath1 = imgPath },"text/html", JsonRequestBehavior.AllowGet);
  22.         }
  23.     }

Index视图代码:

  1. <html>
  2. <head>
  3.     <script src="/jquery-1.7.1.js" type="text/javascript"></script>
  4.     <script src="/ajaxfileupload.js" type="text/javascript"></script>
  5.     <script type="text/javascript">
  6.         $(function () {
  7.             $(":button").click(function () {
  8.                 if ($("#file1").val().length > 0) {
  9.                     ajaxFileUpload();
  10.                 }
  11.                 else {
  12.                     alert("请选择图片");
  13.                 }
  14.             })
  15.         })
  16.         function ajaxFileUpload() {
  17.             $.ajaxFileUpload
  18.             (
  19.                 {
  20.                     url: '/Home/Upload', //用于文件上传的服务器端请求地址
  21.                     type: 'post',
  22.                     data: { Id: '123', name: 'lunis' }, //此参数非常严谨，写错一个引号都不行
  23.                     secureuri: false, //一般设置为false
  24.                     fileElementId: 'file1', //文件上传空间的id属性  <input type="file" id="file" name="file" />
  25.                     dataType: 'json', //返回值类型 一般设置为json
  26.                     success: function (data, status)  //服务器成功响应处理函数
  27.                     {
  28.                         alert(data);
  29.                         $("#img1").attr("src", data.imgPath1);
  30.                         alert("你请求的Id是" + data.Id + "     " + "你请求的名字是:" + data.name);
  31.                         if (typeof (data.error) != 'undefined') {
  32.                             if (data.error != '') {
  33.                                 alert(data.error);
  34.                             } else {
  35.                                 alert(data.msg);
  36.                             }
  37.                         }
  38.                     },
  39.                     error: function (data, status, e)//服务器响应失败处理函数
  40.                     {
  41.                         alert(e);
  42.                     }
  43.                 }
  44.             )
  45.             return false;
  46.         }
  47.     </script>
  48. </head>
  49. <body>
  50.     <p><input type="file" id="file1" name="file" /></p>
  51.     <input type="button" value="上传" />
  52.     <p><img id="img1" alt="上传成功啦" src="" /></p>
  53. </body>
  54. </html>

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

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

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

ajaxfileupload.js异步上传的更多相关文章

  1. 利用ajaxfileupload.js异步上传文件

    1.引入ajaxfileupload.js 2.html代码 <input type="file" id="enclosure" name="e ...

  2. JS异步上传Excel 并使用NPOI进行读写操作

    实现功能 导入——客户端使用 ajaxfileupload.js 插件实现Excel的异步上传,并在服务端解析成JSON字符串返回页面 导出——将页面中的grid表拼接成JSON串上传至服务器,在服务 ...

  3. 关于JQuery.form.js异步上传文件点滴

    好久没动代码了,前几天朋友委托我帮忙给做几个页面,其中有个注册带图片上传的页面.已之前的经验应该很快就能搞定,没想到的是搞了前后近一天时间.下面就说说异步上传的重要几个点,希望自己下次遇到此类问题的时 ...

  4. JS异步上传文件

    直接调用Upload(option)方法,即可上传文件,不需要额外的插件辅助,采用原生js编写. /* *异步上传文件 *option参数 **url:上传路径 **data:上传的其他数据{id:& ...

  5. 关于js异步上传文件

    好久没登录博客园了,今天来一发分享. 最近项目里有个需求,上传文件(好吧,这种需求很常见,这也不是第一次遇到了).当时第一想法就是直接用form表单提交(原谅我以前就是这么干的),不过表单里不仅有文件 ...

  6. ASP.NET MVC 使用jquery.form.js 异步上传 在IE下返回值被变为下载的解决办法

    错误记录: <script type="text/javascript"> $(function () { $(document).off("ajaxSend ...

  7. Node.js——异步上传文件

    前台代码 submit() { var file = this.$refs.fileUpload.files[0]; var formData = new FormData(); formData.a ...

  8. ajaxfileupload.js ajax上传文件(含application/json)

    jQuery.extend({ createUploadIframe: function(id, uri) { //create frame var frameId = 'jUploadFrame' ...

  9. 利用ajaxfileupload插件异步上传文件

    html代码: <input type="file" id="imgFile" name="imgFile" /> js代码: ...

随机推荐

  1. [patl2-001]紧急救援

    解题关键:最短路的变形. 1.按顶点存储,$O(n^2)$ #include<cstdio> #include<cstring> #include<algorithm&g ...

  2. 27-1/x+1/y=1/n

    链接:https://www.nowcoder.com/acm/contest/90/F来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 32768K,其他语言65536K ...

  3. Flask框架 之 基本使用

    初识Flask Flask是一个基于Python开发并且依赖jinja2模板和Werkzeug WSGI服务的一个微型框架,对于Werkzeug本质是Socket服务端,其用于接收http请求并对请求 ...

  4. 36-OLED显示实验

    1.OLED原理 有四种工作模式 先把片选拉低,如果是写的话,把RD拉高,在WR的上升沿写数据到数据线上,DC决定是数据还是命令.读类似了. 2.程序显示原理 3.代码 4.自己写代码 http:// ...

  5. HTML5应用程序缓存Application Cache详解.RP

    什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. A ...

  6. 友盟让用户数据动起来——给app增加运营

    让用户数据动起来——给app增加运营 一.初识友盟 友盟大家都听说过,在给app集成友盟之前对友盟的认识没有那么深刻.用了友盟之后,才发现友盟很强大. 集成友盟能够获取那些数据呢? 用户的基本信息:比 ...

  7. js 代码收集

    //获取image src路径 $(".userImg").click(function(){ var imgsrc = $(this).attr("src") ...

  8. CHImage

    1.启动图.图标 iOS应用图片尺寸制作脚本 ======= github 规格尺寸(官方) AppIcon应用图标 and Launchimage启动图标的制作 iPhone所有手机型号屏幕尺寸 2 ...

  9. 转载Json和Xml的区别，以及它们的底层是如何处理的

    XML:可扩展标记语言       JSON:轻量级的数据交换格式 区别: 1.可读性方面:基本相同,Xml的可读性较好些: 2.可扩展性方面:都有较好的扩展性: 3.编码难度方面:json的编码较容 ...

  10. 智能合约安全事故回顾（2）-BEC溢出攻击

    讲溢出攻击之前,先给大家讲个故事:2014年的时候,美国的宾夕法尼亚州的某个小镇上发生了一个乌龙事件,征兵系统对一万多名1893年到1897出生的男子发去信函,要求他们注册参军,否则面临罚款和监禁.收 ...