//多文件上传 FileUpload
|
//前置插件jquery,webuploader(百度上传)
|
//用法：new FileUpload({...})
|
//author:guye
|
//createdate: 2019/1/8
|
|
(function (global, $, WebUploader, factory) {
|
typeof exports == "object" && typeof module != "undefined" ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : (global.FileUpload = factory());
|
|
})(this, jQuery, WebUploader, function () {
|
|
var FileUpload = function (options) { //构造函数
|
if (!(this instanceof FileUpload)) {
|
console.log("FileUpload 是一个构造函数，应该用new关键字调用");
|
return;
|
}
|
|
//默认配置参数
|
var _DEFALUTS_ = {
|
serverPath: '', //上传路径
|
pick: {
|
id: "#picker", //指定选择文件的按钮容器，不指定则不创建按钮。id {Seletor|dom} 指定选择文件的按钮容器，不指定则不创建按钮。注意 这里虽然写的是 id, 但是不是只支持 id, 还支持 class, 或者 dom 节点。
|
multiple: true, //是否开起同时选择多个文件能力。
|
innerHTML: "", //指定按钮文字。不指定时优先从指定的容器中看是否自带文字。
|
|
},
|
timeout: 0,
|
startUploadBtnId: '#startBtn', //开始上传
|
auto: false, // [默认值：false] 设置为 true 后，不需要手动调用上传，有文件选择即开始上传。
|
method: 'POST', // {Object} [可选] [默认值：'POST'] 文件上传方式，POST或者GET。
|
sendAsBinary: false, // {Object} [可选] [默认值：false] 是否已二进制的流的方式发送文件，这样整个上传内容php://input都为文件内容， 其他参数在$_GET数组中。
|
compress: false, //不启用压缩
|
resize: false, //不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！默认如果是jpeg，文件上传前会压缩一把再上传！
|
formData: {}, //上传的自定义参数
|
fileSingleSizeLimit: 1024 * 1024 * 1024, //默认单个附件限制1G
|
fileSizeLimit: 10 * 1024 * 1024 * 1024, //默认总附件限制10G
|
accept: {
|
title: 'Files',
|
extensions: '*'
|
},
|
|
uploadSuccess: function (file, response) {
|
},
|
fileQueued: function (file) {
|
},
|
beforeAddQueue: function (file) {
|
},
|
uploadProgress: function (file, percentage) {
|
},
|
uploadError: function (file, reason) {
|
},
|
uploadBeforeError: function (file, reason) {
|
},
|
uploadComplete: function (file) {
|
},
|
all: function (type) {
|
//on还可以用来添加一个特殊事件all, 这样所有的事件触发都会响应到。同时此类callback中的arguments有一个不同处， 就是第一个参数为type，记录当前是什么事件在触发。此类callback的优先级比脚低，会再正常callback执行完后触发。
|
}
|
}
|
|
$.extend(_DEFALUTS_, options || {});
|
|
var $btn = $(_DEFALUTS_.startUploadBtnId);
|
var state = 'pending';
|
|
// 实例化
|
var uploader = WebUploader.create({
|
// swf文件路径
|
swf: 'static/plugins/ptfileupload/Uploader.swf',
|
|
// 文件接收服务端。
|
server: _DEFALUTS_.serverPath,
|
|
// 选择文件的按钮。可选。
|
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
|
pick: _DEFALUTS_.pick,
|
timeout: 0,
|
method: _DEFALUTS_.method,
|
// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
|
compress: _DEFALUTS_.compress, //不启用压缩
|
resize: _DEFALUTS_.resize,
|
formData: _DEFALUTS_.formData,
|
fileSingleSizeLimit: _DEFALUTS_.fileSingleSizeLimit,
|
fileSizeLimit: _DEFALUTS_.fileSizeLimit,
|
accept: _DEFALUTS_.accept,
|
auto: _DEFALUTS_.auto,
|
sendAsBinary: _DEFALUTS_.sendAsBinary
|
});
|
uploader.on('beforeFileQueued', function (file) {
|
return _DEFALUTS_.beforeAddQueue && _DEFALUTS_.beforeAddQueue(file);
|
});
|
uploader.on('fileQueued', function (file) {
|
|
_DEFALUTS_.fileQueued && _DEFALUTS_.fileQueued(file);
|
|
});
|
uploader.on('uploadProgress', function (file, percentage) {
|
_DEFALUTS_.uploadProgress && _DEFALUTS_.uploadProgress(file, percentage);
|
|
});
|
|
uploader.on('uploadSuccess', function (file, response) {
|
_DEFALUTS_.uploadSuccess && _DEFALUTS_.uploadSuccess(file, response);
|
|
});
|
|
uploader.on('uploadError', function (file, reason) {
|
_DEFALUTS_.uploadError && _DEFALUTS_.uploadError(file, reason);
|
|
});
|
uploader.on('error', function (type) {
|
_DEFALUTS_.uploadBeforeError && _DEFALUTS_.uploadBeforeError(type);
|
|
});
|
uploader.on('uploadComplete', function (file) {
|
_DEFALUTS_.uploadComplete && _DEFALUTS_.uploadComplete(file);
|
|
});
|
$btn && $btn.on('click', function () {
|
if (state === 'uploading') {
|
uploader.stop();
|
} else {
|
uploader.upload();
|
}
|
});
|
|
|
}
|
|
|
return FileUpload;
|
});
|
