if (!window.UserControl) window.UserControl = {};
UserControl.MultiUpload = function () {
UserControl.MultiUpload.superclass.constructor.call(this);
var me = this;
setTimeout(function () {
// me.initComponents();
me.bindEvents();
}, 300);
}
mini.extend(UserControl.MultiUpload, mini.DataGrid, {
uiCls: 'uc-multiupload',
flashUrl: '',
uploadUrl: '',
uploader: undefined,
uploadName: "Fdata",
limitSize: "500MB",
limitType: "*",
uploadLimit: 0,
queueLimit: 30,
postParam: {},
// continuity: false, //连续上传
autoUpload: false, //选中即上传
customSettings: { queue: null },
columnsTexts: {
nameColumnHeader: "文件名",
typeColumnHeader: "文件类型",
sizeColumnHeader: "文件大小",
completeColumnHeader: "上传进度",
statusColumnHeader: "上传状态",
reasonColumnHeader: "原因",
actionColumnHeader: "操作"
},
_create: function () {
UserControl.MultiUpload.superclass._create.call(this);
var me = this;
var defaultColumns = [
{ "type": "indexColumn" },
{ field: "name", width: 200, header: me.columnsTexts.nameColumnHeader },
{ field: "type", width: 80, header: me.columnsTexts.typeColumnHeader, align: "center", headerAlign: "center" },
{ field: "size", width: 80, header: me.columnsTexts.sizeColumnHeader, align: "center", headerAlign: "center" },
{ field: "complete", width: 80, header: me.columnsTexts.completeColumnHeader, headerAlign: "center" },
{ field: "status", width: 80, header: me.columnsTexts.statusColumnHeader, align: "center", headerAlign: "center" },
{ field: "reason", width: 250, header: me.columnsTexts.reasonColumnHeader, align: "left", headerAlign: "center" },
{ field: "action", width: 50, header: me.columnsTexts.actionColumnHeader, align: "center", headerAlign: "center" }
];
me.set({
showPager: false,
showToolbar: true,
columns: defaultColumns
})
var toolbarEl = me.getToolbarEl();
toolbarEl.style.height = "35px";
me._uploadId = me._id + "_button_placeholder";
var sb = [];
sb.push('
');
toolbarEl.innerHTML = sb.join("");
},
// initComponents: function () {
// },
__OnMouseMove: function () {
var me = this;
if (!me.uploader) {
var limitTypes = me.limitType.split(";");
var lt = [];
var et = [];
for (var i = 0, l = limitTypes.length; i < l; i++) {
var item = limitTypes[i];
et.push(item.replace("*.", ""));
for (var j = 0, k = me.acceptMap.length; j < k; j++) {
if (me.acceptMap[j].code == item) {
lt.push(me.acceptMap[j].text);
}
}
}
var limitType = lt.join(",");
var limitSize = me.changeByte(me.limitSize);
if (limitSize == 0) {
limitSize = 100*1024*1024;
}
var upload = WebUploader.create({
server: me.uploadUrl,
pick: "#" + me._uploadId,
auto: me.autoUpload,
accept: {
extensions: et.join(","),
mimeTypes: "*/*"
},
formData: me.postParam,
// 文件上传参数表,用来标记文件的所有者(如果是一篇文章的附件,就是文章的ID)
formData: {
owner: 'webuploader.webuploader'
},
fileVal: me.uploadName,
// 单个文件大小限制(单位:byte),这里限制为 100M
fileSingleSizeLimit: limitSize,
fileNumLimit: me.queueLimit
})
upload.on("fileQueued", function (file) {
me.__on_file_queued(file, me);
})
upload.on("error", function (type) {
me.__on_Error(type, me);
})
upload.on('uploadProgress', function (file, percentage) {
me.__on_upload_progress(file, percentage, me);
});
upload.on('uploadSuccess', function (file, response) {
if (response.res == "0") {
me.__on_upload_error(file, response.msg, me);
} else {
me.__on_upload_success(file, response, me);
}
});
upload.on('uploadError', function (file, reason) {
me.__on_upload_error(file, reason, me);
});
upload.on('uploadBeforeSend', function (file) {
/*me.extend(headers, {
"Origin":"http://192.168.8.103:913",
"Access-Control-Request-Method": "POST"
});*/
});
// 不管上传成功还是失败,都会触发 uploadComplete 事件
upload.on('uploadComplete', function (file) {
me.__on_upload_complete(file, me);
});
// 当开始上传流程时触发
upload.on('startUpload', function () {
// mini.get("beginBtn").setEnabled(false);
});
// 当所有文件上传结束时触发
upload.on('uploadFinished', function () {
// mini.get("beginBtn").setEnabled(true);
});
me.uploader = upload;
me.uploadButton.on("click", function () {
var rows = me.getData();
if (rows.length > 0) {
me.continuity = true;
me.startUpload();
}
});
me.removeButton.on("click", function () {
window.location = window.location.href;
/*
var rows = me.getData();
for (var i = 0, l = rows.length; i < l; i++) {
me.uploader.cancelFile(rows[i].fileId);
me.uploader.removeFile(rows[i].fileId);
}
me.clearData();*/
});
}
},
bindEvents: function () {
var me = this;
me._fileEl = document.getElementById(me._uploadId);
me.uploadEl = me._fileEl;
var toolbarEl = me.getToolbarEl();
mini.on(me.uploadEl, "mousemove", me.__OnMouseMove, me);
me.uploadButton = mini.getbyName("multiupload", toolbarEl);
me.removeButton = mini.getbyName("removeAll", toolbarEl);
me.on("drawcell", function (e) {
var field = e.field;
var record = e.record;
var uid = record._uid;
var value = e.value;
// if (field == "size") {
// e.cellHtml = bytesToSize(e.value);
// }
if (field == "complete") {
e.cellHtml = ''
+ '
'
+ '
' + value + '%
'
+ '
';
}
if (field == "status") {
if (e.value == 0) {
e.cellHtml = "准备上传";
} else if (e.value == 1) {
e.cellHtml = "上传成功";
} else if (e.value == 2) {
e.cellHtml = "上传失败";
}
}
if (field == "action") {
e.cellHtml = '';
}
})
$(document.body).on("click", ".upicon-remove", function () {
var uid = $(this).attr("name");
var row = me.getRowByUID(uid);
if (me.uploader.getStats().queueNum !== 0) {
me.uploader.cancelFile(row.fileId);
me.uploader.removeFile(row.fileId);
}
me.removeRow(row);
})
},
startUpload: function (fileId) {
var me = this;
if (me.uploader) {
// if (me.postParam) {
// me.uploader.setPostParams(this.postParam);
// }
if (fileId) {
me.uploader.upload(fileId);
} else {
me.uploader.upload();
}
}
},
addPostParam: function (value) {
mini.copyTo(this.postParam, value);
if (this.uploader) {
this.uploader.option("formData", this.postParam);
}
},
setPostParam: function (value) {
this.addPostParam(value);
},
getPostParam: function () {
return this.postParam;
},
__on_file_queued: function (file, me) {
function bytesToSize(bytes) {
if (bytes === 0) return '0 B';
var k = 1024,
sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
i = Math.floor(Math.log(bytes) / Math.log(k));
return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
}
var me = this;
var row = {};
row.name = file.name;
row.type = file.type;
row.status = 0;
row.fileId = file.id;
row.size = bytesToSize(file.size);
row.complete = 0;
me.addRow(row);
if (me.autoUpload) {
me.startUpload(file.id);
}
},
__on_upload_error: function (file, reason, me) {
if (reason == "File Cancelled") return;
if (file) {
var row = me.findRow(function (row) {
if (row.fileId == file.id) return true;
})
me.updateRow(row, { status: 2,reason:reason });
}
var e = { file: file, code: reason, message: reason };
me.fire("uploaderror", e);
},
__on_upload_success: function (file, response, me) {
var row = me.findRow(function (row) {
if (row.fileId == file.id) return true;
})
me.updateRow(row, { status: 1, complete: 100 });
var e = { file: file, serverData: response._raw };
me.fire("uploadsuccess", e);
},
__on_upload_complete: function (file, me) {
if (me.uploader.getStats().queueNum !== 0) {
me.startUpload();
}
// }
},
__on_Error: function (type, me) {
var msg = "";
if (type == "F_DUPLICATE") msg = "已存在同名文件";
else msg = type;
mini.alert("文件选择出错!" + msg);
},
__on_upload_progress: function (file, percentage, me) {
var row = me.findRow(function (row) {
if (row.fileId == file.id) return true;
})
me.updateRow(row, { complete: percentage });
},
// __on_file_queued_error: function (file, errorCode, msg) {
// mini.alert("文件选择出错!errorCode:" + errorCode + ";msg:" + msg);
// },
setUploadUrl: function (url) {
this.uploadUrl = url;
},
getUploadUrl: function () {
return this.uploadUrl;
},
setFlashUrl: function (url) {
this.flashUrl = url;
},
getFlashUrl: function () {
return this.flashUrl;
},
setLimitType: function (type) {
this.limitType = type;
},
getLimitType: function () {
return this.limitType;
},
setLimitSize: function (size) {
this.limitSize = size;
},
getLimitTSize: function () {
return this.limitSize;
},
setUploadName: function (name) {
this.uploadName = name;
},
getUploadName: function () {
return this.uploadName;
},
setAutoUpload: function (val) {
this.autoUpload = val;
},
getAutoUpload: function () {
return this.autoUpload;
},
setQueueLimit: function (num) {
this.queueLimit = num;
},
getQueueLimit: function () {
return this.queueLimit;
},
getAttrs: function (el) {
var attrs = UserControl.MultiUpload.superclass.getAttrs.call(this, el);
mini._ParseString(el, attrs,
["uploadUrl", "flashUrl", "limitType", "limitSize", "uploadName", "queueLimit", "onuploaderror", "onuploadsuccess"]
);
mini._ParseBool(el, attrs,
["autoUpload"]
);
return attrs;
},
acceptMap: [
{ code: "*.3gpp", text: "audio/3gpp" },
{ code: "*.ac3", text: "audio/ac3" },
{ code: "*.asf", text: "allpication/vnd.ms-asf" },
{ code: "*.au", text: "audio/basic" },
{ code: "*.css", text: "text/css" },
{ code: "*.csv", text: "text/csv" },
{ code: "*.cdr", text: "image/cdr" },
{ code: "*.rar", text: "application/octet-stream" },
{ code: "*.doc", text: "application/msword" },
{ code: "*.dot", text: "application/msword" },
{ code: "*.dtd", text: "application/xml-dtd" },
{ code: "*.dwg", text: "image/vnd.dwg" },
{ code: "*.dxf", text: "image/vnd.dxf" },
{ code: "*.gif", text: "image/gif" },
{ code: "*.htm", text: "text/html" },
{ code: "*.html", text: "text/html" },
{ code: "*.jp2", text: "image/jp2" },
{ code: "*.jpe", text: "image/jpeg" },
{ code: "*.jpeg", text: "image/jpeg" },
{ code: "*.jpg", text: "image/jpeg" },
{ code: "*.js", text: "text/javascript" },
{ code: "*.json", text: "application/json" },
{ code: "*.mp2", text: "audio/mpeg" },
{ code: "*.mp3", text: "audio/mpeg" },
{ code: "*.mp4", text: "audio/mp4" },
{ code: "*.mpeg", text: "video/mpeg" },
{ code: "*.mpg", text: "video/mpeg" },
{ code: "*.mpp", text: "application/vnd.ms-project" },
{ code: "*.ogg", text: "audio/ogg" },
{ code: "*.pdf", text: "application/pdf" },
{ code: "*.png", text: "image/png" },
{ code: "*.pot", text: "application/vnd.ms-powerpoint" },
{ code: "*.pps", text: "application/vnd.ms-powerpoint" },
{ code: "*.ppt", text: "application/vnd.ms-powerpoint" },
{ code: "*.rtf", text: "text/rtf" },
{ code: "*.svf", text: "image/vnd.svf" },
{ code: "*.tif", text: "image/tiff" },
{ code: "*.tiff", text: "image/tiff" },
{ code: "*.txt", text: "text/plain" },
{ code: "*.wdb", text: "application/vnd.ms-works" },
{ code: "*.wps", text: "application/vnd.ms-works" },
{ code: "*.xhtml", text: "application/xhtml+xml" },
{ code: "*.xlc", text: "application/vnd.ms-excel" },
{ code: "*.xlm", text: "application/vnd.ms-excel" },
{ code: "*.xls", text: "application/vnd.ms-excel" },
{ code: "*.xlt", text: "application/vnd.ms-excel" },
{ code: "*.xlw", text: "application/vnd.ms-excel" },
{ code: "*.xml", text: "text/xml" },
{ code: "*.zip", text: "application/zip" },
{ code: "*.xlsx", text: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" },
{ code: "*.xltx", text: "application/vnd.openxmlformats-officedocument.spreadsheetml.template" },
{ code: "*.potx", text: "application/vnd.openxmlformats-officedocument.presentationml.template" },
{ code: "*.ppsx", text: "application/vnd.openxmlformats-officedocument.presentationml.slideshow" },
{ code: "*.pptx", text: "application/vnd.openxmlformats-officedocument.presentationml.presentation" },
{ code: "*.sldx", text: "application/vnd.openxmlformats-officedocument.presentationml.slide" },
{ code: "*.docx", text: "application/vnd.openxmlformats-officedocument.wordprocessingml.document" },
{ code: "*.dotx", text: "application/vnd.openxmlformats-officedocument.wordprocessingml.template" },
{ code: "*.xlsm", text: "application/vnd.ms-excel.addin.macroEnabled.12" },
{ code: "*.xlsb", text: " application/vnd.ms-excel.sheet.binary.macroEnabled.12" }
],
changeByte: function (value) {
var number = parseInt(value);
if (isNaN(number) || number == 0) {
return 0;
}
var l2 = String(number).length;
var unit = value.substring(l2).toLowerCase();
var result = number;
if (unit == "kb") {
result = result * 1024;
} else if (unit == "mb") {
result = result * 1024 * 1024;
} else if (unit == "gb" || unit == "g") {
result = result * 1024 * 1024 * 1024;
}
return result;
}
});
mini.regClass(UserControl.MultiUpload, "multiupload");