1.引入插件
<link rel="stylesheet" href="../../resources/js/plugins/webuploader-0.1.5/webuploader.css">
<script src="../../resources/js/min/jquery-1.9.1.min.js"></script><script src="../../resources/js/plugins/webuploader-0.1.5/webuploader.min.js"></script>
2.html
<td width="125px" class="label-text text-right vertical-top">企业logo：</td><td colspan="5"><img id="logoPriview" class="product-img" src="../../resources/img/supplier/default.png"><div class="upload-tip">* 本地图片，支持JPG、JPEG、PNG 格式，<br>最佳长宽比例2:1， 图片大小不超过2M<br><div id="logoUploadBtn" class="mgt5"></div></div></td>
3.css
.new-supplier .product-img{width:110px;height:110px;border-radius:6px;}.new-supplier .upload-tip{display:inline-block;padding-left:10px;vertical-align:bottom;line-height:18px;font-size:12px;color:#de4751;}
#logoUploadBtn div:nth-child(2){width:100%!important;height:100%!important;}/*按钮不能点击问题，直接在页面上设置样式最省事*/
4.js
$(function () {var $ = jQuery;var uploader,baseInfoUploader,productImgUploader,projectCoverUploader;// 图表tab切换$.each($('.chart-list li'), function (i) {$(this).on('click', function () {$(this).addClass('active').siblings('li').removeClass('active');$('.tabs-content').eq(i).show().siblings('.tabs-content').hide();});});// 上传企业logobaseInfoUploader = WebUploader.create({auto: false,swf: '../../resources/js/plugins/webuploader-0.1.5/Uploader.swf',// 文件接收服务端。server: '/server/fileupload.php',pick: {id: '#logoUploadBtn',innerHTML: '选择图片',multiple: true},// 只允许选择图片文件。accept: {title: 'Images',extensions: 'jpg,jpeg,png',mimeTypes: 'image/jpg,image/jpeg,image/png'},fileSingleSizeLimit: 2 * 1024 * 1024});baseInfoUploader.on( 'fileQueued', function( file ) {$img = $('#logoPriview');baseInfoUploader.makeThumb( file, function( error, src ) {if ( error ) {return;}$img.attr( 'src', src );}, 110, 110 );});// 上传产品图片// 在弹层里面的时候，弹出show出来之后，要调用uploader.refresh()方法，否则选择文件的按钮会点击之后没反应（因为太小了，其实没点到）productImgUploader = WebUploader.create({auto: false,swf: '../../resources/js/plugins/webuploader-0.1.5/Uploader.swf',// 文件接收服务端。server: '/server/fileupload.php',pick: {id: '#productImgUploadBtn',innerHTML: '选择图片',multiple: true},// 只允许选择图片文件。accept: {title: 'Images',extensions: 'jpg,jpeg,png',mimeTypes: 'image/jpg,image/jpeg,image/png'},fileSingleSizeLimit: 2 * 1024 * 1024});productImgUploader.on( 'fileQueued', function( file ) {$img = $('#productImgPriview');productImgUploader.makeThumb( file, function( error, src ) {if ( error ) {return;}$img.attr( 'src', src );}, 110, 110 );});// 上传项目封面图projectCoverUploader = WebUploader.create({auto: false,swf: '../../resources/js/plugins/webuploader-0.1.5/Uploader.swf',// 文件接收服务端。server: '/server/fileupload.php',pick: {id: '#projectCoverUploadBtn',innerHTML: '选择图片',multiple: true},// 只允许选择图片文件。accept: {title: 'Images',extensions: 'jpg,jpeg,png',mimeTypes: 'image/jpg,image/jpeg,image/png'},fileSingleSizeLimit: 2 * 1024 * 1024});projectCoverUploader.on( 'fileQueued', function( file ) {$img = $('#projectCoverPriview');projectCoverUploader.makeThumb( file, function( error, src ) {if ( error ) {return;}$img.attr( 'src', src );}, 110, 110 );});//诚信认证，多文件上传$wrap = $('#uploader'),// 图片容器$queue = $('<ul class="filelist"></ul>').appendTo($wrap.find('.queueList')),$listTitle = $wrap.find('.list-title');// 状态栏，包括进度和控制按钮$statusBar = $wrap.find('.statusBar'),// 文件总体选择信息。$info = $statusBar.find('.info'),// 上传按钮$upload = $('.upload-img').find('.uploadBtn'),// 总体进度条$progress = $statusBar.find('.progress').hide(),// 添加的文件数量fileCount = 0,// 添加的文件总大小fileSize = 0,// 优化retina, 在retina下这个值是2ratio = window.devicePixelRatio || 1,// 缩略图大小thumbnailWidth = 80 * ratio,thumbnailHeight = 80 * ratio,// 可能有pedding, ready, uploading, confirm, done.state = 'pedding',// 所有文件的进度信息，key为file idpercentages = {},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;})(),// if ( !WebUploader.Uploader.support() ) {// alert( 'Web Uploader 不支持您的浏览器！如果你使用的是IE浏览器，请尝试升级 flash 播放器');// throw new Error( 'WebUploader does not support the browser you are using.' );// }// 实例化uploader = WebUploader.create({pick: {id: '#filePicker',innerHTML: '选择图片',multiple: true},accept: {title: 'Images',extensions: 'jpg,jpeg,png',mimeTypes: 'image/jpg,image/jpeg,image/png'},// swf文件路径swf: '../../resources/js/plugins/webuploader-0.1.5/Uploader.swf',disableGlobalDnd: true,chunked: true,// server: '/server/fileupload.php',server: '/fileupload.php',fileNumLimit: 300,fileSizeLimit: 20 * 1024 * 1024, // 200 MfileSingleSizeLimit: 2 * 1024 * 1024 // 50 M});// 当有文件添加进来时执行，负责view的创建function addFile(file) {var $li = $('<li id="' + file.id + '">' +'<p class="imgWrap"></p>' +'<p class="progress"><span></span></p>' +'<p title=' + file.name + ' class="title ellipsis">' + file.name + '</p>' +'</li>'),$btns = $('<div class="file-panel">' +'<span class="cancel"></span>').appendTo($li),//'<span class="rotateRight">向右旋转</span>' +//'<span class="rotateLeft">向左旋转</span></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);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('<p class="success">上传成功</p>');}$li.removeClass('state-' + prev).addClass('state-' + cur);});$btns.on('click', 'span', function () {var index = $(this).index();switch (index) {case 0:uploader.removeFile(file);return;}});$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 = '选中' + fileCount + '张图片，共' +WebUploader.formatSize(fileSize) + '。';} else if (state === 'confirm') {stats = uploader.getStats();if (stats.uploadFailNum) {text = '已成功上传' + stats.successNum + '张图片，' +stats.uploadFailNum + '张图片上传失败，<a class="retry" style="color: #de4751;" 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' );//$( '#filePicker2' ).removeClass( 'element-invisible');$wrap.show();$upload.removeClass('disabled');$queue.parent().addClass('filled');$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();$upload.text('开始上传').addClass('disabled');stats = uploader.getStats();if (stats.successNum && !stats.uploadFailNum) {setState('finish');return;}break;case 'finish':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('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('Eroor: ' + 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('todo');});$upload.addClass('state-' + state);updateTotalProgress();});
附图：
