夏日博客

A-A+

jquery文件上传插件：upload无刷新AJAX进度多文件批量上传示例

2016年01月11日 前端设计 暂无评论 阅读 5 views 次

最后在做一个多文件上传的功能，但找了很多的插件都没有用上了，下文来为各位介绍一个：jquery-upload无刷新AJAX进度多文件批量上传，希望文章能够帮助到大家。

1、插件说明

在支持FormData的浏览器完全使用AJAX（即XMLHttpRequest）和input的files属性共同完成上传文件，否则就模拟表单提交来上传文件。支持写的文章和脚本现在看起来都比较稚嫩，现在重新整理、约束，更好的API和便捷使用方法。

插件名称:jquery-upload。

2、插件使用

  1. // 1、判断浏览器支持特征  
  2. // 是否支持HTML5的input的files对象，用于同时选择上传多张图片  
  3. $.support.inputFiles;  
  4. // 是否支持HTML5的FormData，用于AJAX提交  
  5. $.support.formData;  
  6. // 2、默认参数  
  7. $.fn.upload.defaults = {  
  8.     // 提交地址  
  9.     action: "",  
  10.     // 传递额外数据（键值对字符串）  
  11.     data: null,  
  12.     // 表单文件的name值  
  13.     inputName: "file",  
  14.     // 文件最小容量（单位B，默认0）  
  15.     minSize: 0,  
  16.     // 文件最大容量（单位B，默认1M=1024KB=1024*1024B）  
  17.     maxSize: 1048576,  
  18.     // 文件类型（文件后缀）  
  19.     fileType: ["png", "jpg", "jpeg", "gif"],  
  20.     // 错误消息提示  
  21.     errorMsg: {  
  22.         // 单文件上传错误或失败  
  23.         singleError: "第{n}个文件上传错误或失败",  
  24.         // 多文件上传错误或失败  
  25.         multiError: "上传错误或失败",  
  26.         // 单文件未选择  
  27.         singleNone: "尚未选择第{n}个上传文件",  
  28.         // 多文件未选择  
  29.         multiNone: "尚未选择任何上传文件",  
  30.         // 多文件列表为空  
  31.         empty: "待上传文件为空",  
  32.         // 单、多文件错误，{n}表示该文件的序号，开始序号为1  
  33.         type: "第{n}个文件类型不符合要求",  
  34.         size: "第{n}个文件容量不符合要求"  
  35.     },  
  36.     // 完成回调，无论成功还是失败  
  37.     oncomplete: emptyFn,  
  38.     // 成功回调  
  39.     onsuccess: emptyFn,  
  40.     // 失败回调  
  41.     onerror: emptyFn,  
  42.     // 进度回调  
  43.     onprogress: emptyFn  
  44. };  
  45. // 3、上传文件  
  46. $("#file").upload({  
  47.     action: "upload.php"  
  48. });  
  49. // 4、增加文件MIME配对关系  
  50. // 添加单个  
  51. $.fn.upload.addTypeRelationship("text/html", "html");  
  52. // 添加多个  
  53. $.fn.upload.addTypeRelationship({  
  54.     "text/html": "html",  
  55.     "text/xhtml": "xhtml"  
  56. });  
标签：

给我留言