// 初始化变量 function _initUploadOption() { // ----------------------------多文件上传---------------- window.$wrap = $(document).find( '#uploader' ), // 图片容器 window.$queue = $( '<ul class="filelist"></ul>' ) .appendTo($wrap.find( '.queueList' )), // 添加的文件数量 window.fileCount = 0, // 添加的文件总大小 window.fileSize = 0, // 所有文件的进度信息,key为file id window.percentages = {}, // 状态栏,包括进度和控制按钮 window.$statusBar = $wrap.find( '.statusBar' ), // 文件总体选择信息。 window.$info = $statusBar.find( '.info' ), // 上传按钮 window.$upload = $(document).find( '#saveFile' ), // 关闭按钮 window.$close = $(document).find( ".closeBtn" ), // 没选择文件之前的内容。 window.$placeHolder = $wrap.find( '.placeholder' ), // 可能有pedding, ready, uploading, confirm, done. window.state = 'pedding' , // 总体进度条 window.$progress = $statusBar.find( '.progress' ).hide(), // 优化retina, 在retina下这个值是2 ratio = window.devicePixelRatio || 1, // 缩略图大小 window.thumbnailWidth = 110 * ratio, window.thumbnailHeight = 110 * ratio, window.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实例 window.uploader; } // 获取OSS上传key function signInit(type) { function var_str() { $.ajax({ url: "/upload/sign?hosize=&hotype=" + type, async: false , success: function (data) { var data = JSON.parse(data); host = data.host; accessid = data.accessid; policy = data.policy; signature = data.signature; callback = data.callback; dir = data.dir; fileKey = data.fileKey; }, error: function (data) {} }); } return var_str; } // 需要的方法-------- // 当有文件添加进来时执行,负责view的创建 function addFile(file) { let checkboxhtml = '' ; let pichtml = '' ; let fileExt = file.ext.toLowerCase(); if (fileExt == 'ppt' || fileExt == 'pptx' ){ checkboxhtml = '<p class="isppt">动态PPT<input class="ischeckbox" data-id="' + file.id + '" type="checkbox" /></p>' ; } else if (fileExt == "jpg" || fileExt == "gif" || fileExt == "jpeg" || fileExt == "png" || fileExt == "bmp" ) { pichtml = '<span class="rotateRight">向右旋转</span><span class="rotateLeft">向左旋转</span>' ; } var $li = $( '<li id="' + file.id + '">' + '<p class="title">' + file.name + '</p>' + '<p class="imgWrap"></p>' + '<p class="progress"><span></span></p>' + checkboxhtml + '</li>' ), $btns = $( '<div class="file-panel">' + '<span class="cancel">删除</span>' + pichtml + '</div>' ).appendTo($li), $prgress = $li.find( 'p.progress span' ), $wrap = $li.find( 'p.imgWrap' ), $info = $( '<p class="error"></p>' ), showError = function (code) { switch (code) { case 'exceed_size' : text = '文件大小超出' ; break ; case 'interrupt' : text = '上传暂停' ; break ; default : text = '上传失败,请重试' ; break ; } $info.text(text).appendTo($li); }; if (file.getStatus() === 'invalid' ) { showError(file.statusText); } else { // @todo lazyload $wrap.text( '预览中' ); uploader.makeThumb(file, function (error, src) { if (error) { $wrap.text( '不能预览' ); return ; } var img = $( '<img src="' + src + '">' ); $wrap.empty().append(img); }, thumbnailWidth, thumbnailHeight); window.percentages[file.id] = [file.size, 0, 0]; file.rotation = 0; } file.on( 'statuschange' , function (cur, prev) { console.log( 'statuschange' ,cur,prev,file,window.percentages); 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); window.percentages[file.id][1] = 1; } else if (cur === 'interrupt' ) { showError( 'interrupt' ); } else if (cur === 'queued' ) { window.percentages[file.id][1] = 0; } else if (cur === 'progress' ) { $info.remove(); $prgress.css( 'display' , 'block' ); } else if (cur === 'complete' ) { $li.append( '<span class="success"></span>' ); } $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}); }); // 是否动态PPT $li.on( 'change' , '.ischeckbox' , function (e) { let _id = $( this ).data( 'id' ); console.log( 'cccc' ,$( this ).prop( 'checked' )) if ($( this ).prop( 'checked' ) == true ){ window.percentages[_id][2] = 1; } else { window.percentages[_id][2] = 0; } }) $btns.on( 'click' , 'span' , function () { var index = $( this ).attr( 'class' ), deg; switch (index) { case 'cancel' : uploader.removeFile(file); return ; case 'rotateRight' : file.rotation += 90; break ; case 'rotateLeft' : 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 window.percentages[file.id]; updateTotalProgress(); $li.off().find( '.file-panel' ).off().end().remove(); } function updateTotalProgress() { var loaded = 0, total = 0, spans = $progress.children(), percent; $.each(window.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 = '选中' + fileCount + '个文件,共' + WebUploader.formatSize(fileSize) + '。' ; } else if (state === 'confirm' ) { stats = uploader.getStats(); if (stats.uploadFailNum) { text = '已成功上传' + stats.successNum + '个文件到服务器,' + stats.uploadFailNum + '个文件上传失败,<a class="retry" href="#">重新上传</a>失败文件或<a class="ignore" href="#">忽略</a>' } } else { stats = uploader.getStats(); text = '共' + fileCount + '个文件(' + WebUploader.formatSize(fileSize) + '),已上传' + stats.successNum + '个文件' ; if (stats.uploadFailNum) { text += ',失败' + 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' ); $( '#filedata' ).removeClass( 'element-invisible' ); $queue.parent().addClass( 'filled' ); $queue.show(); $statusBar.removeClass( 'element-invisible' ); uploader.refresh(); break ; case 'uploading' : $( '#filedata' ).addClass( 'element-invisible' ); $progress.show(); $upload.text( '上传中,点击可暂停上传' ); break ; case 'paused' : $progress.show(); $upload.text( '继续上传' ); break ; case 'confirm' : $progress.hide(); $upload.text( '开始上传' ).addClass( 'disabled' ); stats = uploader.getStats(); if (stats.successNum && !stats.uploadFailNum) { setState( 'finish' ); return ; } break ; case 'finish' : stats = uploader.getStats(); if (stats.successNum) { // $("#detailModal").modal('hide'); $( '#filedata' ).html( '继续选择' ); $( '#filedata' ).removeClass( 'element-invisible' ); $close.removeAttr( 'disabled' ); $upload.html( '继续提交' ); $upload.removeAttr( 'disabled' ).removeClass( 'disabled' ); bootbox.alert( '上传完成' ); list(params); } else { // 没有成功 state = 'done' ; alert( 'error' ); location.reload(); } break ; } updateStatus(); } // 上传插件 function initUpload() { _initUploadOption(); var f_config = { 'title' : 'Files' , 'extensions' : 'xls,xlsx,ppt,pptx,doc,docx,txt,pdf,jpg,gif,jpeg,png,bmp,mp3,mp4' , 'mimeTypes' : '.xls,.xlsx,.ppt,.pptx,.doc,.docx,.txt,.pdf,.jpg,.gif,.jpeg,.png,.bmp,.mp3,.mp4' , 'sizeLimit' : 100, }; var var_config = signInit( 'i' ); var_config(); var options = { pick: { id: "#saveFile" , multiple: true , }, auto: false , // 自动上传。 swf: log.webupload_swf, // swf文件路径 server: log.oss_geteway, // 文件接收服务端。 formData: { 'url' : host, 'key' : fileKey, 'policy' : policy, 'OSSAccessKeyId' : accessid, 'success_action_status' : '200' , //让服务端返回200,不然,默认会返回204 'callback' : callback, 'signature' : signature, 'hosize' : '' }, accept: { title: f_config.title, extensions: f_config.extensions, mimeTypes: f_config.mimeTypes }, fileNumLimit: 50, fileSingleSizeLimit: f_config.sizeLimit + 'M' , }; console.log( 'options' ,options); uploader = WebUploader.create(options); // 当添加进队列以后触发 uploader.on( 'fileQueued' , function (file) { console.log( 'file1ueued' ,file); fileCount++; fileSize += file.size; if (fileCount === 1) { $placeHolder.addClass( 'element-invisible' ); $statusBar.show(); } let fileExt = file.ext.toLowerCase(); if ( fileExt != "pptx" && fileExt != "ppt" && fileExt != "doc" && fileExt != "docx" && fileExt != "xls" && fileExt != "xlsx" && fileExt != "txt" && fileExt != "pdf" && fileExt != "jpg" && fileExt != "gif" && fileExt != "jpeg" && fileExt != "png" && fileExt != "bmp" && fileExt != "mp3" && fileExt != "mp4" ){ $( ".saveError" ).show(); $( ".save-error-tip" ).html(file.name+ '不支持上传的文件类型' ); $queue.empty(); window.percentages = {}; $placeHolder.removeClass( 'element-invisible' ); fileCount = 0; fileSize == 0; return false ; } else { $( ".saveError" ).hide(); } addFile(file); setState( 'ready' ); updateTotalProgress(); }); // 当文件被移除队列后触发 uploader.on( 'fileDequeued' , function (file) { fileCount--; fileSize -= file.size; if (!fileCount) { setState( 'pedding' ); } removeFile(file); updateTotalProgress(); }); // 当 uploader 被重置的时候触发 uploader.on( 'reset' ,()=>{ }) // 某个文件开始上传前触发,一个文件只会触发一次。 uploader.on( 'uploadStart' ,(file)=>{ // 更新options的formData console.log( 'uploadStart' ) var var_config = signInit( 'i' ); var_config(); options.formData.url = host; options.formData.key = fileKey; options.formData.policy = policy; options.formData.OSSAccessKeyId = accessid; options.formData.callback = callback; options.formData.signature = signature; // 获取或者设置Uploader配置项。没效果坑货.. // uploader.option({ // formData: options.formData // }) uploader.options.formData = options.formData // console.log('get---',uploader.options.formData); }) /** * object {Object} * ret {Object}服务端的返回数据,json格式,如果服务端不是json格式,从ret._raw中取数据,自行解析。 * 当某个文件上传到服务端响应后,会派送此事件来询问服务端响应是否有效。如果此事件handler返回值为false, 则此文件将派送server类型的uploadError事件。 */ uploader.on( 'uploadAccept' ,(object,ret)=>{ // console.log('uploadAccept',object,ret) // 其他功能需求 }); 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.on( 'uploadProgress' , function (file, percentage) { var $li = $( '#' +file.id), $percent = $li.find( '.progress span' ); $percent.css( 'width' , percentage * 100 + '%' ); percentages[ file.id ][ 1 ] = percentage; updateTotalProgress(); }); // 文件上传成功,给item添加成功class, 用样式标记上传成功。 uploader.on( 'uploadSuccess' , function (file, data) { }); // 文件上传失败,现实上传出错。 uploader.on( 'uploadError' , function (file) { }); // 完成上传完了,成功或者失败,先删除进度条。 uploader.on( 'uploadComplete' , function (file) { }); uploader.on( "error" , function (type) { if (type == "F_EXCEED_SIZE" ) { bootbox.alert( "文件大小不能超过100M" ); } else if (type == "Q_TYPE_DENIED" ){ bootbox.alert( "不支持的文件类型" ); } else { bootbox.alert( "上传出错!请检查后重新上传!错误代码" +type); } }); $info.on( 'click' , '.retry' , function () { uploader.retry(); } ); $info.on( 'click' , '.ignore' , function () { // alert( 'todo' ); } ); // 开始上传 $upload.on( 'click' , function () { if ($( this ).hasClass( 'disabled' )) { return false ; } $upload.html( '保存中...' ); // $upload.attr('disabled','disabled'); $close.attr( 'disabled' , 'disabled' ); pid = $( "#pid" ).val(); key = $( "#key" ).val(); isopen = $( "#isopen" ).val(); if (state === 'ready' ) { uploader.upload(); } else if (state === 'paused' ) { uploader.upload(); } else if (state === 'uploading' ) { uploader.stop(); } }); } |