最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
jquery文件上传插件:upload无刷新AJAX进度多文件批量上传示例
时间:2022-06-25 17:42:40 编辑:袖梨 来源:一聚教程网
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"
});
相关文章
- 《原神》5.2卡池抽取建议 11-14
- 《原神》5.2版本新怪物介绍 11-14
- 《原神》希诺宁增伤触发方法 11-14
- 《原神》循音觅奇活动入口 11-14
- 《原神》循音觅奇兑换码获取方法 11-14
- 《原神》花羽会活动飞行技巧介绍 11-14