1. 程式人生 > >Webuploader圖片上傳控制元件的使用,專案中都可以引用

Webuploader圖片上傳控制元件的使用,專案中都可以引用

// 當domReady的時候開始初始化 $(function() { var $wrap = $('#uploader'), // 圖片容器 $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下這個值是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 = './expressInstall.swf'; // insert flash object var 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', label: '點選選擇圖片' }, formData: { uid: 123 }, dnd: '#dndArea', paste: '#uploader', swf: '<%=path %>/common/plugins/Uploader.swf', chunked: false, chunkSize: 512 * 1024 * 1024, server: '<%=path %>/upload', // runtimeOrder: 'flash', accept: { title: 'Images', extensions: 'gif,jpg,jpeg,bmp,png', mimeTypes: 'image/*' }, // 禁掉全域性的拖拽功能。這樣不會出現圖片拖進頁面的時候,把圖片開啟。 disableGlobalDnd: true, thumb:{ width: 200, height: 200, // 圖片質量,只有type為`image/jpeg`的時候才有效。 quality: 70, // 是否允許放大,如果想要生成小圖的時候不失真,此選項應該設定為false. allowMagnify: false, // 是否允許裁剪。 crop: true, // 為空的話則保留原有圖片格式。 // 否則強制轉換成指定的型別。 type: 'image/jpeg' }, compress:{ width: 600, height: 600, // 圖片質量,只有type為`image/jpeg`的時候才有效。 quality: 90, // 是否允許放大,如果想要生成小圖的時候不失真,此選項應該設定為false. allowMagnify: false, // 是否允許裁剪。 crop: false, // 是否保留頭部meta資訊。 preserveHeaders: true, // 如果發現壓縮後文件大小比原來還大,則使用原來圖片 // 此屬性可能會影響圖片自動糾正功能 noCompressIfLarger: false, // 單位位元組,如果圖片大小小於此值,不會採用壓縮。 compressSize: 20*1024 }, fileNumLimit: 1, fileSizeLimit: 50 * 1024 * 1024, // 5 M fileSingleSizeLimit: 50 * 1024 * 1024 // 1 M }); var array=[]; uploader.on('uploadSuccess',function(file,response ){ array.push(response.savepath); console.log("image:" + array.join(",")); $(window.parent.document).find("#imgs").val(array.join(",")); }); // 拖拽時不接受 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.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('../../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' ) { $info.remove(); $prgress.css('display', 'block'); percentages[ file.id ][ 1 ] = 0; } else if ( cur === 'progress' ) { $info.remove(); $prgress.css('display', 'block'); } else if ( cur === 'complete' ) { $prgress.hide().width(0); $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="#">重新上傳</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.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( '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 ) { console.log(code); if (code == "Q_EXCEED_NUM_LIMIT") { alert("只能上傳1張圖片"); }else if(code=='Q_EXCEED_SIZE_LIMIT'){ alert('新增的檔案總大小超出最大值50M'); }else if(code=='F_EXCEED_SIZE'){ alert('上傳圖片不能超過50M'); }else{ 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( 'todo' ); } ); $upload.addClass( 'state-' + state ); updateTotalProgress(); });

相關推薦

Webuploader圖片控制元件的使用專案可以引用

// 當domReady的時候開始初始化 $(function() { var $wrap = $('#uploader'), // 圖片容器 $queue = $( '<ul class="filelist">&

【JS】封裝相容正版IE9的控制元件支援圖片格式圖片大小圖片寬高驗證支援非圖片樣式

先廢話一小段,大家好,本人首篇處女作,為什麼要實現一個上傳控制元件呢,必然是公司需要嘛,實現整個過程挺揪心的,因為要解決ie9這個相容性問題,整體來說我前後用了五天的時間來實現。依賴了jquery,其實也可以使用原生編寫,不過想偷偷懶,公司也推薦使用jquery。因為是第一次

關於IE9下用按鈕觸發file控制元件請求無法觸發的問題

很多系統為了美觀,都會在網頁中用一個隱藏的按鈕觸發file上傳控制元件,一般正常的在Chrome和Firefox下沒有問題,但是切換到IE9和IE10下請求無法到達後臺,這是因為IE9和IE10為了安全考慮,阻止了不是直接點選file的上傳。因為這個問題,折騰了一天,參考網

jQuery-uploader輕量級圖片控制元件(可拖拽)

在xxx-uploader基礎上修改。 基於bootstrap和jQuery,需要引入 bootstrap.js 和 jQuery.js 原控制元件大小30多k,風格類似於bootstrap,可在css內修改樣式。 我這裡在uploader.js裡展現的樣式做了略微的調整:

解決FileUpLoad控制元件限制檔案大小

系統預設上傳檔案大小4096KB,如果我們要上傳超過此大小的檔案,會出現錯誤介面等…… 其實,只要我們對web.config檔案做一下配置,就可以輕鬆搞定你的“難題”! 在配置檔案中新增如下程式碼: <configuration>     <system.

百度Ueditor多圖片控制元件

發現百度的Ueditor富文字編輯器中的多圖片上傳控制元件很不錯,於是便想著分享出來使用,費了老勁,少不了無名朋友的幫助,也查了不少資料,終於搞定了 發程式碼給大家,請大家多多指正 1.首先要在html頁面中新增對ueditor的指令碼引用 <script

js控制圖片預覽使用三方外掛+名稱顯示和控制元件非display:none隱藏

第一次寫blog,只是為了自己做記錄,方便下次尋找方便,如有不足處見諒。 js三方引用,v1.4,附件下載http://jquery.decadework.com     <script src="js/uploadPreview.js"></script

百度控制元件webuploader與修改Java版本

一、webuploader的官網例子:點選開啟連結         二、上傳與編輯實現        1、引入CSS和js檔案 <script type="text/javascript" src="${basePath}/tools/webuploader/dis

控制元件選擇完圖片後將其立即顯示在頁面上(jquery ajax)

       最近做了一個個人部落格系統,在新增修改“博主資訊”功能中有一項選擇頭像,用過<input type="file" />控制元件的都知道,選擇完圖片之後顯示的只是檔案的名字,而我想將圖片顯示在頁面上,初步的想法是選擇完圖片後提交到後臺,然後返回圖片的

解決美化後的檔案控制元件(type=file)IE和firefox不相容的問題

        普通的file控制元件,在IE和firefox的表現會有所不同,為了美化上傳控制元件,通常會做一個text+button來替代file控制元件。 設定file控制元件完全透明,這樣在點選button的時候,其實就是點選隱藏的file控制元件的瀏覽,本來應該完

百度控制元件WebUploader介紹

功能介紹 WebUploader是由Baidu開發的以HTML5為主,FLASH為輔的現代檔案上傳元件。在現代的瀏覽器裡面能充分發揮HTML5的優勢,同時又不摒棄主流IE瀏覽器,沿用原來的FLASH執行時,相容IE6+,iOS 6+, android 4+。兩

百度出品強大的Html5控制元件WebUploader-支援手機端

介紹了功能強大的上傳控制元件[uploadify.js] plupload]之後,好多同學都問我要demo。其實上傳控制元件很多。尤其最近使用了百度出品強大的Html5上傳控制元件WebUploader。更是覺得有這個就足夠了。 1、什麼是WebUploader?所謂的百度出品  必屬精品。參考echa

圖片和裁剪bitmapcutter組件的使用

lastindex mar adp display new else if iss .aspx 客戶 圖片上傳在上篇博文中講過。 這裏主要是裁剪的實現,需要用到bitmapcutter組件。 jquery.bitmapcutter該插件由Jericho開發,它的主要作用是客

ssm項目KindEditor的圖片插件瀏覽器兼容性問題

技術 個人觀點 瀏覽器兼容 type 瀏覽器兼容性 char json字符串 註解 問題 解決辦法: 原因:使用@ResponseBody註解返回java對象,在瀏覽器中是Content-Type:application/json;charset=UTF-8 我們需要返回字

基於Vue + Node.js + MongoDB的圖片組件實現圖片的預覽和刪除

信息 clas 發送數據 演示 新增 one input標簽 return tof 公司要寫一些為自身業務量身定制的的組件,要基於Vue,趁著這個機會,自己在業余時間也寫了個組件,選擇寫圖片上傳是因為自己之前一直對這個功能比較迷糊,所以這次好好了解了一下。演示在網址打開後的

自定義控制元件實現

FileReader 物件 存檔 方便以後拿來即用 可以整合 canvas圖片裁剪進行實現 <input type="file" value="提交" id="file"> <button id="btn">上傳圖片並預覽</button>

Bootstrap之fileinput檔案控制元件

 前言~ 前段時間做專案用到了bootstrap裡中的檔案上傳控制元件,對此特定寫這篇文章,講述一下bootstrap的檔案上傳空間的使用方法。 我們進入正題吧!        首先bootstrap是基於jquery的,因此要匯入

百度編輯器Ueditor控制元件相關問題解決

1、問題原因: 由於百度編輯器相關jar包裡面的class檔案在某些特殊的情況下無法完全引入,或者映入過後無法讀取config.json的配置檔案導致上傳的相關配置不正確。 2、解決辦法: 修改ueditor.config.js的配置讀取的控制器層介面地址(注:該地址用於返回上

檔案~Uploadify控制元件

namespace EntityFrameworks.Application.Core.FileUpload { /// <summary> /// 影象上傳功能的實現 /// </summary> public class UploadImp

html檔案控制元件file自定義樣式

問題: HTML自帶的file上傳按鈕因在各種瀏覽器裡顯示樣式不一、不易自定義樣式給我們帶來很大的麻煩。 解決思路: 將input[type=file]控制元件隱藏,使用一個input[type=text]和button組合作為file控制元件的替代(樣式自行定義),並將