jquery-upload 无刷新 AJAX 进度多文件批量上传

发布于 2021-12-03 23:17:52 字数 1777 浏览 1195 评论 0

1、插件说明

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

插件名称：jquery-upload。

2、插件使用

// 1、判断浏览器支持特征
// 是否支持HTML5的input的files对象，用于同时选择上传多张图片
$.support.inputFiles;
// 是否支持HTML5的FormData，用于AJAX提交
$.support.formData;
 
// 2、默认参数
$.fn.upload.defaults = {
  // 提交地址
  action: "",
  // 传递额外数据（键值对字符串）
  data: null,
  // 表单文件的name值
  inputName: "file",
  // 文件最小容量（单位B，默认0）
  minSize: 0,
  // 文件最大容量（单位B，默认1M=1024KB=1024*1024B）
  maxSize: 1048576,
  // 文件类型（文件后缀）
  fileType: ["png", "jpg", "jpeg", "gif"],
  // 错误消息提示
  errorMsg: {
    // 单文件上传错误或失败
    singleError: "第{n}个文件上传错误或失败",
    // 多文件上传错误或失败
    multiError: "上传错误或失败",
    // 单文件未选择
    singleNone: "尚未选择第{n}个上传文件",
    // 多文件未选择
    multiNone: "尚未选择任何上传文件",
    // 多文件列表为空
    empty: "待上传文件为空",
    // 单、多文件错误，{n}表示该文件的序号，开始序号为1
    type: "第{n}个文件类型不符合要求",
    size: "第{n}个文件容量不符合要求"
  },
  // 完成回调，无论成功还是失败
  oncomplete: emptyFn,
  // 成功回调
  onsuccess: emptyFn,
  // 失败回调
  onerror: emptyFn,
  // 进度回调
  onprogress: emptyFn
};
 
// 3、上传文件
$("#file").upload({
  action: "upload.php"
});
 
// 4、增加文件MIME配对关系
// 添加单个
$.fn.upload.addTypeRelationship("text/html", "html");
// 添加多个
$.fn.upload.addTypeRelationship({
  "text/html": "html",
  "text/xhtml": "xhtml"
});