webuploader 实现图片批量上传功能附实例代码
生活随笔
收集整理的這篇文章主要介紹了
webuploader 实现图片批量上传功能附实例代码
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1、導入資源
2、JSP代碼
3、Js代碼
<script type="text/javascript">var imagePath=null; function article_save() {alert("刷新父級的時候會自動關閉彈層。");window.parent.location.reload();}/*項目發票-添加*/function article_add(title, url, w, h) {if(imagePath){var index = layer.open({type : 2,title : title,content : url+imagePath});layer.full(index);}else{alert("沒有上傳圖片,請先上傳圖片");}}$(function() {$('.skin-minimal input').iCheck({checkboxClass : 'icheckbox-blue',radioClass : 'iradio-blue',increaseArea : '20%'});$list = $("#fileList"), $btn = $("#btn-star"), state = "pending",uploader;var uploader = WebUploader.create({auto : true,swf : 'lib/webuploader/0.1.5/Uploader.swf',// swf文件路徑// 文件接收服務端。server : 'lib/webuploader/0.1.5/server/fileupload.php', // 文件接收服務端。// 選擇文件的按鈕。可選。// 內部根據當前運行是創建,可能是input元素,也可能是flash.pick : '#filePicker',// 不壓縮image, 默認如果是jpeg,文件上傳前會壓縮一把再上傳!resize : false,// 只允許選擇圖片文件。accept : {title : 'Images',extensions : 'gif,jpg,jpeg,bmp,png',mimeTypes : 'image/*'}});// 當有文件被添加進隊列的時候uploader.on('fileQueued',function(file) {var $li = $('<div id="' + file.id + '" class="item">'+ '<div class="pic-box"><img></div>'+ '<div class="info">'+ file.name+ '</div>'+ '<p class="state">等待上傳...</p>'+ '</div>'), $img = $li.find('img');$list.append($li);// 創建縮略圖// 如果為非圖片文件,可以不用調用此方法。// thumbnailWidth x thumbnailHeight 為 100 x 100uploader.makeThumb(file, function(error, src) {if (error) {$img.replaceWith('<span>不能預覽</span>');return;}$img.attr('src', src);}, thumbnailWidth, thumbnailHeight);});// 文件上傳過程中創建進度條實時顯示。uploader.on('uploadProgress',function(file, percentage) {var $li = $('#' + file.id), $percent = $li.find('.progress-box .sr-only');// 避免重復創建if (!$percent.length) {$percent = $('<div class="progress-box"><span class="progress-bar radius"><span class="sr-only" style="width:0%"></span></span></div>').appendTo($li).find('.sr-only');}$li.find(".state").text("上傳中");$percent.css('width', percentage * 100 + '%');});// 文件上傳成功,給item添加成功class, 用樣式標記上傳成功。uploader.on('uploadSuccess', function(file) {$('#' + file.id).addClass('upload-state-success').find(".state").text("已上傳");});// 文件上傳失敗,顯示上傳出錯。uploader.on('uploadError', function(file) {$('#' + file.id).addClass('upload-state-error').find(".state").text("上傳出錯");});// 完成上傳完了,成功或者失敗,先刪除進度條。uploader.on('uploadComplete', function(file) {$('#' + file.id).find('.progress-box').fadeOut();});uploader.on('all', function(type) {if (type === 'startUpload') {state = 'uploading';} else if (type === 'stopUpload') {state = 'paused';} else if (type === 'uploadFinished') {state = 'done';}if (state === 'uploading') {$btn.text('暫停上傳');} else {$btn.text('開始上傳');}});$btn.on('click', function() {if (state === 'uploading') {uploader.stop();} else {uploader.upload();}});});(function($) {// 當domReady的時候開始初始化$(function() {var $wrap = $('.uploader-list-container'),// 圖片容器$queue = $('<ul class="filelist"></ul>').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下這個值是2ratio = window.devicePixelRatio || 1,// 縮略圖大小thumbnailWidth = 110 * ratio, thumbnailHeight = 110 * ratio,// 可能有pedding, ready, uploading, confirm, done.state = 'pedding',// 所有文件的進度信息,key為file idpercentages = {},// 判斷瀏覽器是否支持圖片的base64isSupportBase64 = (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 = 'expressInstall.swf';// insert flash objectvar html = '<object type="application/'+ 'x-shockwave-flash" data="' + swf + '" ';if (WebUploader.browser.ie) {html += 'classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" ';}html += 'width="100%" height="100%" style="outline:0">'+ '<param name="movie" value="' + swf + '" />'+ '<param name="wmode" value="transparent" />'+ '<param name="allowscriptaccess" value="always" />'+ '</object>';container.html(html);})($wrap);// 壓根就沒有安轉。} else {$wrap.html('<a href="http://www.adobe.com/go/getflashplayer" target="_blank" border="0"><img alt="get flash player" src="http://www.adobe.com/macromedia/style_guide/images/160x41_Get_Flash_Player.jpg" /></a>');}return;} else if (!WebUploader.Uploader.support()) {alert('Web Uploader 不支持您的瀏覽器!');return;}// 實例化uploader = WebUploader.create({pick : {id : '#filePicker-2',label : '點擊選擇圖片'},formData : {uid : 123},dnd : '#dndArea',paste : '#uploader',swf : 'lib/webuploader/0.1.5/Uploader.swf',chunked : false,chunkSize : 512 * 1024,server : 'invoiceVo/news_uploder?&projectId=${projectId}',// runtimeOrder: 'flash',// accept: {// title: 'Images',// extensions: 'gif,jpg,jpeg,bmp,png',// mimeTypes: 'image/*'// },// 禁掉全局的拖拽功能。這樣不會出現圖片拖進頁面的時候,把圖片打開。disableGlobalDnd : true,fileNumLimit : 300,fileSizeLimit : 200 * 1024 * 1024, // 200 MfileSingleSizeLimit : 50 * 1024 * 1024// 50 M});// 拖拽時不接受 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('dialogOpen', function() {console.log('here');});// 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 : '繼續添加'}); */uploader.on('ready', function() {window.uploader = uploader;});// 當有文件添加進來時執行,負責view的創建function addFile(file) {var $li = $('<li id="' + file.id + '">'+ '<p class="title">' + file.name + '</p>'+ '<p class="imgWrap"></p>'+ '<p class="progress"><span></span></p>' + '</li>'),$btns = $('<div class="file-panel">'+ '<span class="cancel">刪除</span>'+ '<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) {var img;if (error) {$wrap.text('不能預覽');return;}if (isSupportBase64) {img = $('<img src="'+src+'">');$wrap.empty().append(img);} else {$.ajax('lib/webuploader/0.1.5/server/preview.php',{method : 'POST',data : src,dataType : 'json'}).done(function(response) {if (response.result) {img = $('<img src="'+response.result+'">');$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('<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});});$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 = '選中' + fileCount + '張圖片,共'+ WebUploader.formatSize(fileSize) + '。';} else if (state === 'confirm') {stats = uploader.getStats();if (stats.uploadFailNum) {text = '已成功上傳'+ stats.successNum+ '張照片至XX相冊,'+ stats.uploadFailNum+ '張照片上傳失敗,<a class="retry" href="#" rel="external nofollow" rel="external nofollow" >重新上傳</a>失敗圖片或<a class="ignore" href="#" rel="external nofollow" rel="external nofollow" >忽略</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.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) {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) {alert(response.status);if (response.status == "success") {imagePath =response.filePath;alert("文件保存路徑:" + response.filePath);} else if (response.status == "error")alert(response.error);});uploader.on('all', function(type) {var stats;//alert(type);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();});})(jQuery);</script>注意:
4、controller代碼
總結
以上是生活随笔為你收集整理的webuploader 实现图片批量上传功能附实例代码的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 路由器WAN网口可接入192.168.0
- 下一篇: 短时平均过零率