Uploadifive 批量文件上传

Uploadifive 批量文件上传_uploadifive 多个上传按钮_asing1elife的博客-CSDN博客

属性
auto - Boolean - true
当文件被添加到上传队列时，会自动上传
buttonClass - String
为上传按钮指定一个类选择器
buttonText - String - SELECT FILES
定义显示在按钮上的文本内容
uploadScript - String - uploadifive.php
上传文件到服务器的后端请求路径
checkScript - String
验证待上传文件是否已存在于文件目录中的后端请求路径
文件不存在则返回 0 ，存在则返回 1
dnd - Boolean - true
允许拖拽上传文件
fileObjName - String
为待上传的文件指定字段名称供后端接收
fileSizeLimit - String
指定单个文件的大小限制
默认单位是 KB ，但可以在数字后明确标识 MB 或 GB ，插件内部会自动转换为 KB
fileType - String
指定允许上传的文件类型
支持模糊匹配，例如 image/* 只允许上传图片，image/png 则只允许上传 png 格式的图片
允许多种类型的文件则需要通过 | 进行分隔
模糊匹配采用的格式是 MIME types ，可参见 Media Types
formData - JSON
指定文件上传时需要一起提交的其他数据对象
height - Number - 30
指定上传按钮的高度
width - Number - 100
指定上传按钮的宽度
itemTemplate - String
指定文件上传队列的 HTML 模版
模版的最外层 div 必须指定类选择器为 uploadifive-queue-item
.filename 显示文件名称
.close 提供关闭按钮
.fileinfo 显示文件信息
progress-bar 显示上传进度
method - String - post
指定上传文件的提交方式
取值为 post 或 get
multi - Boolean - true
支持多文件上传
overrideEvents - JSON
可指定多个插件默认事件中的事件名称，被指定的事件将不会执行
queueID - String
指定用于显示上传队列的父级元素
若启用了 dnd 功能，则将文件拖放到该父元素中，会触发文件上传
queueSizeLimit - Number
指定上传队列中一次可容纳的最大文件数量
removeCompleted - Boolean - false
文件上传完毕后从上传队列中移除
simUploadLimit - Number
一次可上传的文件数量
truncateLength - Number
指定文件名称的截取长度
设置该值后，文件名称超过该长度将会被截取
uploadLimit - Number
指定允许上传的最大文件数量
该值的设定不会影响上传队列中可添加的文件数量
事件
添加新文件到上传队列中
"onAddQueueItem": function (file) {
console.log(file.name);
}
1
2
3
将文件从上传队列中删除
"onCancel": function (file) {
console.log(file.name);
}
1
2
3
验证文件是否已存在
"onCheck": function (file, exists) {
console.log(file.name);
console.log(exists ? "存在" : "不存在");
}
1
2
3
4
清空上传队列
"onClearQueue": function (queue) {
console.log(queue.css());
}
1
2
3
销毁 uploadifive 实例
"onDestroy": function () {
console.log("uploadifive 实例被销毁");
}
1
2
3
将文件拖拽到上传队列中
"onDrop": function (files, fileDropCount) {
console.log(files.length);
console.log("拖拽文件数量：" + fileDropCount)
}
1
2
3
4
上传文件出错
"onError": function (errorType) {
console.log("QUEUE_LIMIT_EXCEEDED: 超过上传队列允许的文件数量");
console.log("UPLOAD_LIMIT_EXCEEDED: 超过上传文件允许的文件数量");
console.log("FILE_SIZE_LIMIT_EXCEEDED: 超过上传文件允许的大小限制");
console.log("FORBIDDEN_FILE_TYPE: 被禁止上传的文件类型");
console.log("404_FILE_NOT_FOUND: 未找到文件");
}
1
2
3
4
5
6
7
浏览器不支持 HTML5
"onFallback": function () {
console.loh("浏览器不支持 HTML5");
}
1
2
3
初始化 uploadifive 完成
"onInit": function () {
console.log("uploadifive 已初始化完成");
}
1
2
3
文件上传中
"onProgress": function (file, event) {
console.log(file.name);
console.log(event.lengthComputable ? "文件上传进度可计算" : "文件上传进度不可计算");
console.log("文件已上传" + evenet.loaded + "字节");
console.log("文件总共" + evenet.total + "字节");
}
1
2
3
4
5
6
上传队列中的所有文件上传完成
"onQueueComplete": function (uploads) {
console.log(uploads.attempts);
console.log("上传成功的文件数量：" + uploads.successful);
console.log("上传失败的文件数量：" + uploads.errors);
console.log("上传文件总数量：" + uploads.count);
}
1
2
3
4
5
6
选择某个文件
"onSelect": function (queue) {
console.log("被取消的文件数量：" + queue.cancelled);
console.log("上传队列中的文件数量：" + queue.count);
console.log("上传错误的文件数量：" + queue.errors);
console.log("被添加到上传队列中的文件数量：" + queue.queued);
console.log("被选择的文件数量：" + queue.selected);
}
1
2
3
4
5
6
7
文件被上传
"onUpload": function (filesToUpload) {
console.log("将被上传的文件数量：" + filesToUpload);
}
1
2
3
每一个文件上传完成
"onUploadComplete": function (file, data) {
console.log(file.name);
console.log("后端异步操作返回结果：" + JSON.parse(data));
}
1
2
3
4
每一个文件上传开始
"onUploadFile": function (file) {
console.log(file.name);
}
1
2
3
方法
取消文件上传
从上传队列中指定被取消上传的文件
取消上传的显示方式，为 true 表示直接取消，为 false 则会有一个淡出隐藏的效果
$("#uploadFile").uploadifive("cancel", $('.uploadifive-queue-item').first().data('file'), true);
1
清空上传队列
$("#uploadFile").uploadifive("clearQueue");
1
在控制台输出 uploadifive 详细信息
$("#uploadFile").uploadifive("debug");
1
销毁 uploadifive 实例
$("#uploadFile").uploadifive("destroy");
1
开始上传文件
从上传队列中指定被上传的文件
第二个参数未指定则默认上传队列中所有文件
$("#uploadFile").uploadifive("upload", $('.uploadifive-queue-item').first().data('file'));
1