php使用webuploader前後端程式碼分享
阿新 • • 發佈：2018-12-12
WebUploader是由Baidu WebFE團隊開發的一個簡單的以HTML5為主，FLASH為輔的現代檔案上傳元件。 公司要做一個類似於論壇的網站，要用到圖片上傳功能，因為WebUploader相容性比較好，所以我選擇了它。
先看看完成時的樣子。
下面講講正式的使用。
前期準備工作 1，下載官方外掛包，下載地址 https://github.com/fex-team/webuploader/releases 下載完成後，解壓，把整個目錄匯入專案。 2，在程式碼中引入 webuploader.css和webuploader.min.js檔案，這些檔案可以在剛剛剛下載的檔案中找到，另外還要下載、引入jquery.min.js哦~
當這些準備工作做完後，你的程式碼應該類似於這樣的（body裡面的div是官方demo裡面帶的）。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="__STATIC__/webuploader/0.1.5/webuploader.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="formControls " > <div class="uploader-list-container" > <div class="queueList" > <div id="dndArea" class="placeholder"> <div id="filePicker-2"></div> <p>文章標題圖片</p> </div> </div> <div class="statusBar" style="display:none;"> <div class="progress"> <span class="text">0%</span> <span class="percentage"></span> </div> <div class="info"></div> <div class="btns"> <div id="filePicker2"></div> <div class="uploadBtn">開始上傳</div> </div> </div> </div> </div> <div id="InputsWrapper"> </div> </body> </html> <script src="__STATIC__/js/jquery.min.js"></script> <script type="text/javascript" src="__STATIC__/webuploader/0.1.5/webuploader.min.js"></script>
簡單說說這些程式碼吧，怕有些剛剛入行的小白不理解。這裡的程式碼主要想說兩個地方，第一個地方__STATIC__是我使用TP5框架的模板標籤。第二個想說的地方是<div id="InputsWrapper"> </div>，這個div裡面主要放的是後端返回來的資料，提交表單的時候會用到。
接下來重頭戲來了，看好。 在下方新增如下指令碼
<script> var SCOPE = { 'swf' : '/public/static/webuploader/0.1.5/Uploader.swf', 'url' : "{:url('Index/write/upload')}", }; $(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下這個值是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-2', label: '點選選擇圖片' }, formData: { uid: 123 }, dnd: '#dndArea', paste: '#uploader', swf: SCOPE.swf, chunked: false, chunkSize: 512 * 1024, server: SCOPE.url, // runtimeOrder: 'flash', // accept: { // title: 'Images', // extensions: 'gif,jpg,jpeg,bmp,png', // mimeTypes: 'image/*' // }, // 禁掉全域性的拖拽功能。這樣不會出現圖片拖進頁面的時候，把圖片開啟。 disableGlobalDnd: true, fileNumLimit: 3, fileSizeLimit: 200 * 1024 * 1024, // 200 M fileSingleSizeLimit: 50 * 1024 * 1024 // 50 M //fileNumLimit: 3 }); // 拖拽時不接受 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: '繼續新增' }); var picId = 0; // 檔案上傳成功，給item新增成功class, 用樣式標記上傳成功。 uploader.on( 'uploadSuccess', function( file ,response) { picId++; console.log("response:",response); $("#InputsWrapper").append('<input type="hidden" name="news" id="'+picId+'" value="'+response+'"/>'); }); 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="#">重新上傳</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 ) { // if (code == "Q_EXCEED_NUM_LIMIT") { // alert('最多隻能上傳3張哦'); // } if (code == "Q_TYPE_DENIED") { alert('請上傳JPG、PNG、GIF、BMP格式檔案'); } else if (code == "Q_EXCEED_NUM_LIMIT") { alert('最多隻能上傳3張哦'); }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(); }); </script>
額，你是在逗我嗎？怎麼這麼多程式碼？放心，這些程式碼並不需要你全部瞭解，我也是瞭解一些的。
下面說說以上的script指令碼你必須知道的東西。
var SCOPE = {
'swf' : '/public/static/webuploader/0.1.5/Uploader.swf',
'url' : "{:url('Index/write/upload')}",
};
上面這段長長的程式碼開頭處定義了一個SCOPE的變數，下面存放了兩個地址。
“swf” 指向你下載webupload資料夾中Uploader.swf檔案 “url” 指向你要往服務端提交的地址
小夥伴們要跟你的實際情況來填寫。 填寫完成之後，就要用到SCOPE變量了。我已經幫你寫好了，但是你要明白其中的意思。
// 例項化
uploader = WebUploader.create({
pick: {
id: '#filePicker-2',
label: '點選選擇圖片'
},
formData: {
uid: 123
},
dnd: '#dndArea',
paste: '#uploader',
swf: SCOPE.swf,
chunked: false,
chunkSize: 512 * 1024,
server: SCOPE.url,
// runtimeOrder: 'flash',
// accept: {
// title: 'Images',
// extensions: 'gif,jpg,jpeg,bmp,png',
// mimeTypes: 'image/*'
// },
// 禁掉全域性的拖拽功能。這樣不會出現圖片拖進頁面的時候，把圖片開啟。
disableGlobalDnd: true,
fileNumLimit: 3,
fileSizeLimit: 200 * 1024 * 1024, // 200 M
fileSingleSizeLimit: 50 * 1024 * 1024 // 50 M
});
fileNumLimit: 3我給他設定為3，表示最多隻能上傳3張，如果想上傳更能多張，別忘了更改程式碼。
這裡面的引數代表代表什麼意思是十分重要的，有興趣的話可以瞭解一下官方文件。
當你完成這些後，說明你已經完成了70%的任務，用瀏覽器開啟你剛剛編寫的介面，按下F12。
看看Console裡面有沒有有沒有報錯，如果跟我一樣沒有報錯，恭喜你離成功只有一步之遙。
下面分享出php後端程式碼（TP5框架）
public function upload()
{
$files = request()->file('file');//TP5自帶接受檔案的方法
if($files){
$info = $files->move(ROOT_PATH . 'public' . DS . 'uploads'); //把它移入到指點目錄
if($info){
return json_encode($info->getSaveName());//如果上傳成功返回json型別的圖片地址（適用多圖）
}else{
echo $files->getError();
}
}
}
說說已上程式碼的意思註釋裡已經說明了。
那麼服務端返回的圖片路徑資訊在哪去接受呢？ 接收的方法還是在那個長長的script腳本里面
var picId = 0;
// 檔案上傳成功，給item新增成功class, 用樣式標記上傳成功。
uploader.on( 'uploadSuccess', function(response) {
picId++;
console.log("response:",response);
$("#InputsWrapper").append('<input type="hidden" name="news" id="'+picId+'" value="'+response+'"/>');
});
這個uploader.on( ‘uploadSuccess’, function(response)方法用來接收伺服器的返回值。
一下這行的程式碼的意思是把接受到的值，動態新增到HTML中。picId變數上傳多圖會用到。
$("#InputsWrapper").append('<input type="hidden" name="news" id="'+picId+'" value="'+response+'"/>');
這樣的話你提交的時候就可以用 $(’#1’).val() $(’#2’).val() $(’#3’).val() $(’#4’).val() … 來拿到圖片的路徑資訊了。
這樣完整的前後端應用webupload上傳圖片的案例就寫完了，作者我本人是純手寫的，本著分享的原則來幫助那些剛入坑的小夥伴呢，少花一點時間，多提高一點效率。
轉載請註明來源。
謝謝。