$(function() { var $wrap = $('#uploader'), // 图片容器 $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, // 优化retina, 在retina下这个值是2 ratio = window.devicePixelRatio || 1, // 缩略图大小 thumbnailWidth = 110 * ratio, thumbnailHeight = 110 * ratio, // 可能有pedding, ready, uploading, confirm, done. state = 'pedding', // 所有文件的进度信息,key为file id percentages = {}, // 判断浏览器是否支持图片的base64 isSupportBase64 = ( function() { var data = new Image(); var support = true; data.onload = data.onerror = function() { if( this.width != 1 || this.height != 1 ) { support = false; } } data.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="; return support; } )(), // 检测是否已经安装flash,检测flash的版本 flashVersion = ( function() { var version; try { version = navigator.plugins[ 'Shockwave Flash' ]; version = version.description; } catch ( ex ) { try { version = new ActiveXObject('ShockwaveFlash.ShockwaveFlash').GetVariable('$version'); } catch ( ex2 ) { version = '0.0'; } } version = version.match( /\d+/g ); return parseFloat( version[ 0 ] + '.' + version[ 1 ], 10 ); } )(), 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('flash') && WebUploader.browser.ie ) { // flash 安装了但是版本过低。 if (flashVersion) { (function(container) { window['expressinstallcallback'] = function( state ) { switch(state) { case 'Download.Cancelled': alert('您取消了更新!') break; case 'Download.Failed': alert('安装失败') break; default: alert('安装已成功,请刷新!'); break; } delete window['expressinstallcallback']; }; var swf = 'js/expressInstall.swf'; // insert flash object var html = '' + '' + ''; container.html(html); })($wrap); // 压根就没有安转。 } else { $wrap.html('get flash player'); } return; } else if (!WebUploader.Uploader.support()) { alert( '您的浏览器不支持上传!'); return; } 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 + '张照片上传失败,重新上传失败图片或忽略' } } else { stats = uploader.getStats(); text = '共' + fileCount + '张(' + WebUploader.formatSize( fileSize ) + '),已上传' + fileCount + '张'; 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.hide(); $statusBar.addClass( 'element-invisible' ); uploader.refresh(); break; case 'ready': $placeHolder.addClass( 'element-invisible' ); $( '#filePicker2' ).removeClass( 'element-invisible'); $queue.show(); $statusBar.removeClass('element-invisible'); uploader.refresh(); break; case 'uploading': $( '#filePicker2' ).addClass( 'element-invisible' ); $progress.show(); $upload.text( '暂停上传' ); break; case 'paused': $progress.show(); $upload.text( '继续上传' ); break; case 'confirm': $progress.hide(); $( '#filePicker2' ).removeClass( 'element-invisible' ); $upload.text( '开始上传' ); stats = uploader.getStats(); if ( stats.successNum && !stats.uploadFailNum ) { setState( 'finish' ); return; } break; case 'finish': stats = uploader.getStats(); if ( stats.successNum ) { Manager.uploadComplete(uploader.fileList); // alert( '上传成功' ); } else { // 没有成功的图片,重设 state = 'done'; location.reload(); } break; } updateStatus(); } // 根据ID获取file对象 function getFileById(ID){ var file; for(var i = 0; i < uploader.fileList.length; i++){ if(ID == uploader.fileList[i].id){ file = uploader.fileList[i]; } }; return file; } //根据ID删除文件 function removeFileById( ID ) { var removeFile = getFileById(ID); uploader.removeFile(removeFile); delete percentages[ ID ]; updateTotalProgress(); } 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 webuploader(opts){ var defaults = { swf: 'webuploader/Uploader.swf', server: 'fileupload.php', fileNumLimit: 10, fileSizeLimit: 50 * 1024 * 1024, // 50 M fileSingleSizeLimit: 5 * 1024 * 1024, // 5 M pick: { id: '#filePicker', label: '点击选择图片', name : 'file' }, dnd: '#dndArea', paste: '#uploader', chunked: false, chunkSize: 512 * 1024, /* formData: {}, accept: { title: 'Images', extensions: 'gif,jpg,jpeg,bmp,png,rar,zip', mimeTypes: 'image/*' },*/ disableWidgets: 'log', // 禁止开启日志组件 by 小虎哥 //禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候,把图片打开。 disableGlobalDnd: true }; opts = $.extend(defaults, opts); // 实例化 uploader = WebUploader.create(opts); // 拖拽时不接受 js, txt 文件。 uploader.on( 'dndAccept', function( items ) { var denied = false, len = items.length, i = 0, // 修改js类型 unAllowed = 'text/plain;application/javascript '; for ( ; i < len; i++ ) { // 如果在列表里面 if ( ~unAllowed.indexOf( items[ i ].type ) ) { denied = true; break; } } return !denied; }); // 验证大小和重复 uploader.on('error', function (type) { if (type === "F_DUPLICATE") { alert("请不要选择重复文件!"); return false; } else if (type === "F_EXCEED_SIZE") { /*上传大小提示 by 小虎哥*/ var maxSize = opts.fileSingleSizeLimit; var units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB']; for(var i = 0; maxSize >= 1024 && i < 5; i++) { maxSize = maxSize / 1024; }; maxSizeStr = Math.round(maxSize, 2) + units[i]; alert("文件大小不可超过" + maxSizeStr + " 哦!换个小点的文件吧!"); return false; /*end*/ } }); uploader.on('filesQueued', function() { uploader.sort(function( a, b ) { if ( a.name < b.name ) return -1; if ( a.name > b.name ) return 1; return 0; }); }); // 添加“添加文件”的按钮, uploader.addButton({ id: '#filePicker2', label: '继续添加', name : opts.pick.name }); uploader.on('ready', function() { window.uploader = uploader; }); uploader.on( 'uploadSuccess', function( file,data) { $( '#'+file.id ).addClass('upload-state-done'); if(data.state == 'SUCCESS'){ var sLi = ""; sLi += '
  • '; sLi += ''; sLi += ''; sLi += '删除'; sLi += '
  • '; $(".fileWarp ul").append(sLi); $( '#'+file.id ).append('
    删除
    '); $( '#'+file.id ).hover(function(){ $( '#'+file.id ).find('.file-panel').css('height','30px'); },function(){ $( '#'+file.id ).find('.file-panel').css('height','0px'); }) }else{ alert(data.state); } }); // 当有文件添加进来时执行,负责view的创建 function addFile( file ) { uploader.fileList = uploader.fileList || []; uploader.fileList.push(file); var $li = $( '
  • ' + '

    ' + file.name + '

    ' + '

    '+ '

    ' + '
  • ' ), $btns = $('
    ' + '删除' + '向右旋转' + '向左旋转
    ').appendTo( $li ), $prgress = $li.find('p.progress span'), $wrap = $li.find( 'p.imgWrap' ), $info = $('

    '), 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 ) { var img; if ( error ) { $wrap.text( '没有预览图' ); return; } if( isSupportBase64 ) { img = $(''); $wrap.empty().append( img ); } else { $.ajax(eyou_basefile+"?m="+module_name+"&c=Uploadify&a=preview", { method: 'POST', data: src, dataType:'json' }).done(function( response ) { if (response.result) { img = $(''); $wrap.empty().append( img ); } else { $wrap.text("预览出错"); } }); } }, thumbnailWidth, thumbnailHeight ); percentages[ file.id ] = [ file.size, 0 ]; file.rotation = 0; } 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) +')'); // use jquery animate to rotation // $({ // rotation: rotation // }).animate({ // rotation: file.rotation // }, { // easing: 'linear', // step: function( now ) { // now = now * Math.PI / 180; // var cos = Math.cos( now ), // sin = Math.sin( now ); // $wrap.css( 'filter', "progid:DXImageTransform.Microsoft.Matrix(M11=" + cos + ",M12=" + (-sin) + ",M21=" + sin + ",M22=" + cos + ",SizingMethod='auto expand')"); // } // }); } }); $li.appendTo( $queue ); } // 负责view的销毁 function removeFile( file ) { var arr = []; for(var i = 0; i < uploader.fileList.length; i++){ if(file.id != uploader.fileList[i].id) arr.push(uploader.fileList[i]); }; uploader.fileList = arr; var $li = $('#'+file.id); delete percentages[ file.id ]; $li.off().find('.file-panel').off().end().remove(); } 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( '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 ) { alert( '提示: ' + code ); }; $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( '请检查上传配置以及上传目录写入权限' ); } ); $upload.addClass( 'state-' + state ); updateTotalProgress(); }; window.Manager = { init : function(){ var __self = this; var $manageArea = $('#manage_area'),$searchArea = $('#search_area'); $('#upload_tab,#manage_tab,#search_tab').click(function(){ var $this = $(this), $par = $this.parent(), id = $this.attr('id'), $curArea = $('div.area-checked'), $now; if($this.hasClass('checked')) return; $par.find('li.checked').removeClass('checked'); $this.addClass('checked'); if(id == 'upload_tab') $now = $('#upload_area'); else if(id == 'manage_tab'){ Manager.showList(); $now = $manageArea; }else{ Manager.showSearch(); $now = $searchArea; } $curArea.fadeOut('fast', function(){ $curArea.removeClass('area-checked'); $now.fadeIn('fast').addClass('area-checked'); }); }); $('ul.choose-btns > li.sure').click(function(){ var $checkedFile = $(this).parents('div.area').find('div.file-list li.checked'); if($checkedFile.length < 1){ alert('请选择文件'); }else { __self.sure($checkedFile); } }); $('ul.choose-btns > li.cancel').click(function(){ __self.cancel(); }); $searchArea.find('input.submit').click(function(){ var key = $(this).prev('input:text').val(); __self.showSearch(key); }); $searchArea.find('input.key').keyup(function(e){ if(e.keyCode == 13) $(this).next('input.submit').click(); }); }, upload : function(opts){ this.opts = opts, par = window.parent, type = this.opts.type; if(type == 'Images'){ this.opts.accept = { title : '图片', extensions : 'gif,jpg,jpeg,bmp,png,ico,webp', mimeTypes : 'image/gif,image/jpg,image/jpeg,image/png,image/bmp,image/x-icon,image/webp' } }else if(type == 'Flash'){ this.opts.accept = { title : '视频', extensions : 'flash,swf,zip', mimeTypes : 'image/*' } }else{} if(Object.prototype.toString.call(this.opts.formData) != '[object Object]') this.opts.formData = {}; //this.opts.formData = $.extend(this.opts.formData, {uid : 1}); if(this.opts.auto == true){ $('.uploadBtn').hide(); } if(this.opts.fileNumLimit == 1){ $('#filePicker2').hide(); } webuploader(opts); this.uploader = uploader; return this; }, showList : function(){ if(this.lock1) return; this.lock1 = true; this.showFiles({type : this.opts.type}, $('#file_all_list')) }, showSearch : function(key){ if(this.lock2) return; this.lock2 = true; var data = {}; if(key) data.key = key; data.type = this.opts.type; this.showFiles(data, $('#file_search_list')) }, //显示文件列表 showFiles : function(data, $container){ var __self = this; $container.empty().parents('div.area').addClass('loading'); data = typeof data == 'object' && data != null ? data : {}; data = $.extend(data, this.opts.formData); $.ajax({ url : __self.opts.filelistPah, data : data, dataType : 'json', success : function(data){ var $html = __self.createFile(data); if(typeof $html == 'string') $container.append($html); else{ for(var i = 0; i < $html.length; i++) $container.append($html[i]); } }, complete : function(){ __self.lock1 = false; __self.lock2 = false; $container.parents('div.area').removeClass('loading'); } }); }, //生成单个文件 createFile : function(data){ var __self = this, str = '
  • 没有文件
  • '; if(data && data.list && data.list.length > 0){ var arr = [], li, i = 0, t, file, ext; for(; i < data.list.length; i++){ t = data.list[i]; ext = t.name.split('.'); ext = ext[ext.length - 1]; file = '
    '; if(!/png|jpg|jpeg|gif|bmp/.test(ext)) file = '
    '; $li = $('
  • 删除
    ' + file + '
    ' + t.name + '
  • '); $li.click(function(){ __self.checkFile($(this)); }).data('file', {name : t.name, url : t.url, mtime : t.mtime, list : data.list}); $li.find('span.cancel').click(function(){ __self.delFile($(this).parents('li')); return false; }); $li.find('div.img').dblclick(function(){ __self.sure($(this).parent()); }); arr.push($li); } return arr; } return str; }, checkFile : function($file){ if(this.$curFile) this.cancelFile(this.$curFile); $file.addClass('checked'); this.$curFile = $file; }, delFile : function($file){ if(!confirm('确定删除吗?')) return false; var file = $file.data('file'); $file.find('div.file-panel').css('display', 'none'); var data = {url : file.url, name : file.name, mtime : file.mtime, action : 'del'}; data = $.extend(data, this.opts.formData); $.ajax({ url : this.opts.delPath, data : data, type : 'POST', success : function(data){ if(data == 1){ $file.fadeOut(function(){ $(this).remove(); }); }else{ alert('删除失败'); } }, complete : function(){ $file.find('div.file-panel').css('display', 'block'); } }); }, cancelFile : function($file){ if(!$file) $file = this.$curFile; if($file) $file.removeClass('checked'); }, //选中文件 sure : function($file){ var data = $file.data('file'); var sLi = ""; sLi += '
  • '; sLi += ''; sLi += ''; sLi += '删除'; sLi += '
  • '; $(".fileWarp ul").append(sLi); $(".statusBar .saveBtn").trigger("click"); }, cancel : function(){ window.parent.layer.closeAll(); }, uploadComplete : function(list){ console.log(list) }, del:function(obj){ if(!confirm('确定删除吗?')) return false; $.post(eyou_basefile+"?m="+module_name+"&c=Uploadify&a=delupload",{action:"del", filename:$(obj).attr('data-img')},function(res){ if(res == 1){ var id = $(obj).parents('.state-complete').attr('id'); removeFileById(id); $('.'+id).remove(); }else{ alert("删除失败"); } } ); } }; Manager.init(); });