$.fn.UploadRun = function (opt) { //语言版本 languageOpt = { cn: { unSupportMsg: '该上传插件不支持您的浏览器!如果您使用的是IE浏览器,请尝试升级 flash 播放器', browseMsg: '点击选择文件', keepAddMsg: '继续添加', allowTypeMsg: '支持格式:', delMsg: '删除', rightMsg: '向右旋转', leftMsg: '向左旋转', overMaxMsg: '文件大小超出', pauseMsg: '上传暂停', failedMsg: '上传失败,请重试', previewMsg: '预览中', notPreviewMsg: '不能预览', selectedMsg: '选中@0个文件,共@1。', successmsg: '已成功上传@0,上传失败@1', countMsg: '共@0张(@1),已上传@2张', failedCountMsg: ',失败@0张', stopMsg: '暂停上传', continueMsg: '继续上传', startMsg: '开始上传', q_TYPE_DENIED: opt.fileExtMsg || "请选择支持的文件格式!", q_EXCEED_NUM_LIMIT: "单次只能上传50个文件!", q_EXCEED_SIZE_LIMIT: "单次上传的文件总量不能超过 @0KB!", q_EXCEED_SIZE: opt.maxSizeMsg || "单个文件容量过大,最大 @0KB!", q_DUPLICATE: "选择了重复文件!", }, en: { unSupportMsg: 'WebUploader does not support the browser you are using.', browseMsg: 'Browse', keepAddMsg: 'Keep adding', allowTypeMsg: 'Allow upload format:', delMsg: 'Delete', rightMsg: 'Rotate right', leftMsg: 'Rotate left', overMaxMsg: 'File size exceeds maximum', pauseMsg: 'Pause', failedMsg: 'Upload failed,please try agains', previewMsg: 'Preview', notPreviewMsg: "Can't preview", selectedMsg: 'Selected @0 files,Total @1.', successmsg: 'Success @0,fail@1', countMsg: 'Total @0(@1),Success @', failedCountMsg: ',fail @0', stopMsg: 'Pause', continueMsg: 'Continue', startMsg: 'Start', q_TYPE_DENIED: opt.fileExtMsg || "Please select a supported file format!", q_EXCEED_NUM_LIMIT: "Only 50 files can be uploaded at a single time!", q_EXCEED_SIZE_LIMIT: "Total file uploads cannot exceed @0KB!", q_EXCEED_SIZE: opt.maxSizeMsg || "The file is too large,maximum @0KB!", q_DUPLICATE: "Duplicate file selected!", } }; var $ = jQuery, $wrap = $(opt.fileId), swfUrl = window.location.protocol + '//' + window.location.host + $("script[websiteurl]").attr("websiteurl") + 'Res/webuploader/Uploader.swf', uploadUrl = window.location.protocol + '//' + window.location.host + $("script[websiteurl]").attr("websiteurl") + 'Ajax/WhirUpload.aspx?formId=' + opt.formId + '&isPic=' + (opt.isPic ? '1' : '0'), // 图片容器 $queue = $('') .appendTo($wrap.find('.queueList')), // 状态栏,包括进度和控制按钮 $statusBar = $wrap.find('.statusBar'), // 文件总体选择信息。 $info = $statusBar.find('.info'), // 上传按钮 $upload = $wrap.find('.uploadBtn'), // 没选择文件之前的内容。 $placeHolder = $wrap.find('.placeholder'), // 总体进度条 $progress = $statusBar.find('.progress').hide(), // 添加的文件数量 fileCount = 0, // 添加的文件总大小 fileSize = 0, //语言版本 cn-中文,en-英文 lang = opt.lang || "cn", // 优化retina, 在retina下这个值是2 ratio = window.devicePixelRatio || 1, // 缩略图大小 thumbnailWidth = 110 * ratio, thumbnailHeight = 110 * ratio, // 可能有pedding, ready, uploading, confirm, done. state = 'pedding', // 所有文件的进度信息,key为file id percentages = {}, supportTransition = (function () { var s = document.createElement('p').style, r = 'transition' in s || 'WebkitTransition' in s || 'MozTransition' in s || 'msTransition' in s || 'OTransition' in s; s = null; return r; })(), // WebUploader实例 uploader; if (!WebUploader.Uploader.support()) { alert(languageOpt[lang]['unSupportMsg']); throw new Error(languageOpt[lang]['unSupportMsg']); } // 实例化 uploader = WebUploader.create({ pick: { id: opt.filePicker, label: languageOpt[lang]['browseMsg'], multiple: opt.isMulti }, dnd: opt.fileId + ' .queueList', paste: document.body, //上传类型 accept: { title: 'Images', extensions: opt.fileExt ? opt.fileExt : 'gif,jpg,jpeg,bmp,png', mimeTypes: opt.isPic ? 'image/*' : '' }, // swf文件路径 swf: swfUrl, //是否允许拖拽 disableGlobalDnd: true, //分片上传 chunked: true, //上传文件接收地址 server: uploadUrl, //最多选择文件数量 fileNumLimit: 50, //总文件大小 fileSizeLimit: opt.size ? opt.size * 20 * 1024 : 200 * 1024 * 1024, // 200 M 文件大小限制 //单个文件大小 fileSingleSizeLimit: opt.size ? opt.size * 1024 : 5 * 1024 * 1024 // 5 M 单文件大小限制 }); // 添加“添加文件”的按钮, uploader.addButton({ id: opt.filePicker2, label: languageOpt[lang]['keepAddMsg'] }); $placeHolder.append("
" + languageOpt[lang]['allowTypeMsg'] + opt.fileExt + "
"); // 当有文件添加进来时执行,负责view的创建 function addFile(file) { var $li = $('
  • ' + '

    ' + file.name + '

    ' + '

    ' + '

    ' + '
  • '), $btns = $('
    ' + '' + languageOpt[lang]['delMsg'] + '' + '' + languageOpt[lang]['rightMsg'] + '' + '' + languageOpt[lang]['leftMsg'] + '
    ').appendTo($li), $prgress = $li.find('p.progress span'), $wrap = $li.find('p.imgWrap'), $info = $('

    '), showError = function (code) { switch (code) { case 'exceed_size': text = languageOpt[lang]['overMaxMsg']; break; case 'interrupt': text = languageOpt[lang]['pauseMsg']; break; default: text = languageOpt[lang]['failedMsg']; break; } $info.text(text).appendTo($li); }; if (file.getStatus() === 'invalid') { showError(file.statusText); } else { // @todo lazyload $wrap.text(languageOpt[lang]['previewMsg']); uploader.makeThumb(file, function (error, src) { if (error) { $wrap.text(languageOpt[lang]['notPreviewMsg']); return; } var img = $(''); $wrap.empty().append(img); }, thumbnailWidth, thumbnailHeight); percentages[file.id] = [file.size, 0]; file.rotation = 0; $upload.removeClass("disabled"); } file.on('statuschange', function (cur, prev) { if (prev === 'progress') { $prgress.hide().width(0); } else if (prev === 'queued') { $li.off('mouseenter mouseleave'); $btns.remove(); } // 成功 if (cur === 'error' || cur === 'invalid') { console.log(file.statusText); showError(file.statusText); percentages[file.id][1] = 1; } else if (cur === 'interrupt') { showError('interrupt'); } else if (cur === 'queued') { percentages[file.id][1] = 0; } else if (cur === 'progress') { $info.remove(); $prgress.css('display', 'block'); } else if (cur === 'complete') { $li.append(''); } $li.removeClass('state-' + prev).addClass('state-' + cur); }); $li.on('mouseenter', function () { $btns.stop().animate({ height: 30 }); }); $li.on('mouseleave', function () { $btns.stop().animate({ height: 0 }); }); $btns.on('click', 'span', function () { var index = $(this).index(),deg; switch (index) { case 0: uploader.removeFile(file); return; case 1: file.rotation += 90; break; case 2: file.rotation -= 90; break; } if (supportTransition) { deg = 'rotate(' + file.rotation + 'deg)'; $wrap.css({ '-webkit-transform': deg, '-mos-transform': deg, '-o-transform': deg, 'transform': deg }); } else { $wrap.css('filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation=' + (~~((file.rotation / 90) % 4 + 4) % 4) + ')'); } }); $li.appendTo($queue); } // 负责view的销毁 function removeFile(file) { var $li = $('#' + file.id); delete percentages[file.id]; updateTotalProgress(); $li.off().find('.file-panel').off().end().remove(); } function updateTotalProgress() { var loaded = 0, total = 0, spans = $progress.children(), percent; $.each(percentages, function (k, v) { total += v[0]; loaded += v[0] * v[1]; }); percent = total ? loaded / total : 0; spans.eq(0).text(Math.round(percent * 100) + '%'); spans.eq(1).css('width', Math.round(percent * 100) + '%'); updateStatus(); } function updateStatus() { var text = '', stats; if (state === 'ready') { text = languageOpt[lang]['selectedMsg'].replace("@0", fileCount).replace("@1", WebUploader.formatSize(fileSize)); } else if (state === 'confirm') { stats = uploader.getStats(); if (stats.uploadFailNum) { text = languageOpt[lang]['successmsg'].replace("@0", stats.successNum).replace("@1", stats.uploadFailNum); } } else { stats = uploader.getStats(); text = languageOpt[lang]['countMsg'].replace("@0", fileCount).replace("@1", WebUploader.formatSize(fileSize)).replace("@2", stats.successNum); if (stats.uploadFailNum) { text = languageOpt[lang]['failedCountMsg'].replace("@0", stats.uploadFailNum); } } $info.html(text); } function setState(val) { var file, stats; if (val === state) { return; } $upload.removeClass('state-' + state); $upload.addClass('state-' + val); state = val; switch (state) { case 'pedding': $placeHolder.removeClass('element-invisible'); $queue.parent().removeClass('filled'); $queue.hide(); $statusBar.addClass('element-invisible'); uploader.refresh(); break; case 'ready': $placeHolder.addClass('element-invisible'); $(opt.filePicker2).removeClass('element-invisible'); $queue.parent().addClass('filled'); $queue.show(); $statusBar.removeClass('element-invisible'); uploader.refresh(); break; case 'uploading': $(opt.filePicker2).addClass('element-invisible'); $progress.show(); $upload.text(languageOpt[lang]['stopMsg']); break; case 'paused': $progress.show(); $upload.text(languageOpt[lang]['continueMsg']); startMsg break; case 'confirm': $progress.hide(); $upload.text(languageOpt[lang]['startMsg']).addClass('disabled'); stats = uploader.getStats(); if (stats.successNum && !stats.uploadFailNum) { setState('finish'); return; } break; case 'finish': $(opt.filePicker2).removeClass('element-invisible'); stats = uploader.getStats(); if (stats.successNum) { //alert('上传成功'); } else { // 没有成功的图片,重设 state = 'done'; location.reload(); } break; } updateStatus(); } uploader.onUploadProgress = function (file, percentage) { var $li = $('#' + file.id), $percent = $li.find('.progress span'); $percent.css('width', percentage * 100 + '%'); percentages[file.id][1] = percentage; updateTotalProgress(); }; uploader.onFileQueued = function (file) { fileCount++; fileSize += file.size; if (fileCount === 1) { $placeHolder.addClass('element-invisible'); $statusBar.show(); } addFile(file); setState('ready'); updateTotalProgress(); }; uploader.onFileDequeued = function (file) { fileCount--; fileSize -= file.size; if (!fileCount) { setState('pedding'); } removeFile(file); updateTotalProgress(); }; // 文件上传成功 uploader.on('uploadSuccess', function (file, response) { if (response.Result) { // 上传成功 if (opt.isMulti) $(opt.fileUrl).val($(opt.fileUrl).val() + "*" + response.Msg); else $(opt.fileUrl).val(response.Msg); } else { // 上传错误或失败 var $file = $("#" + file.id); $error = $('

    '); $error.text(response.Msg).appendTo($file); $file.find(".success").remove(); } }); uploader.on('all', function (type) { var stats; switch (type) { case 'uploadFinished': setState('confirm'); break; case 'startUpload': setState('uploading'); break; case 'stopUpload': setState('paused'); break; } }); uploader.onError = function (code) { switch (code) { case 'Q_TYPE_DENIED': alert(languageOpt[lang]['q_TYPE_DENIED']); break; case 'Q_EXCEED_NUM_LIMIT': alert(languageOpt[lang]['q_EXCEED_NUM_LIMIT']); break; case 'Q_EXCEED_SIZE_LIMIT': alert(languageOpt[lang]['q_EXCEED_SIZE_LIMIT'].replace("@0", opt.size ? opt.size * 20 : 200)); break; case 'F_EXCEED_SIZE': alert(languageOpt[lang]['q_EXCEED_SIZE'].replace("@0", opt.size ? opt.size : 5)); break; case 'F_DUPLICATE': alert(languageOpt[lang]['q_DUPLICATE']); break; } }; $upload.on('click', function () { if ($(this).hasClass('disabled')) { return false; } if (state === 'ready') { uploader.upload(); } else if (state === 'paused') { uploader.upload(); } else if (state === 'uploading') { uploader.stop(); } }); $info.on('click', '.retry', function () { uploader.retry(); }); $info.on('click', '.ignore', function () { alert('todo'); }); $upload.addClass('state-' + state); updateTotalProgress(); /*关闭上传框窗口后恢复上传框初始状态*/ function closeUploader() { // 移除所有缩略图并将上传文件移出上传序列 for (var i = 0; i < uploader.getFiles().length; i++) { // 将图片从上传序列移除 uploader.removeFile(uploader.getFiles()[i]); // 将图片从缩略图容器移除 var $li = $('#' + uploader.getFiles()[i].id); $li.off().remove(); } setState('pedding'); // 重置文件总个数和总大小 fileCount = 0; fileSize = 0; // 重置uploader,目前只重置了文件队列 uploader.reset(); // 更新状态等,重新计算文件总个数和总大小 updateStatus(); } return { closeUploader: closeUploader, fileUrl: opt.fileUrl } }