js外掛+UploadFile類實現圖片的批量上傳
阿新 • • 發佈:2019-01-01
檔案上傳無疑是web應用中一個非常常用的功能,下面小編給大家分享一下diyUpload.js+ThinkPHP中的UploadFile類實現圖片的批量上傳。
首先,給大家介紹展示一下具體操作頁面:
html程式碼如下:
<div class="stepsTop"> <!--進度條--> <ul class="steps clearfix" id="steps"> <li class="active"><span>1</span>上傳圖片</li> <li><span>2</span>上傳圖片資訊檔案(可省略)</li> <li class="complete"><span>完成</span></li> </ul> <!--圖片上傳過程中,圖片上傳動態提示--> <div class="pic_operation clearfix" style="display:none"> <div class="lf_cont"> <em>已選中<span class="num" id="slNum">'+slNum+'</span>張圖片<!--圖片上傳總數--> </div> <div class="btns"> <strong>正在上傳第<span class="num" id="nowNum">'+nowNum+'</span>張圖片...</strong><a href="javascript:;" class="add " id="prevStep">繼續新增</a><a href="javascript:;" class="nextStep" id="nextStep">開始上傳</a> </div> </div> <ul class="stepsCont" id="stepsCont"> <!--選擇圖片按鈕--> <li class="cur"> <div class="upload"> <p class="pic_con"><img src="/NewWanbu/App/Photo/Tpl/Public/image/i_pic.jpg" alt=""></p> <p class="up_btn"><a href="javascript:;" id="slPicBtn">點選選擇圖片</a></p> <p>支援JPG、PNG、GIF格式圖片,最多上傳50張,圖片檔名不能重複</p> </div> </li> </ul> </div>
如圖,最上方有操作進度條提示當前進度,下方是一個選擇圖片的按鈕,點選按鈕選擇圖片之後效果如下圖所示:
如果還想選擇其他圖片可以點選‘繼續新增’按鈕,選擇想要上傳的圖片;或者已選中的圖片不想要了,可以點選圖片上的“X”按鈕刪除,如下:
頁面上js程式碼如下:
/* * 伺服器地址,成功返回,失敗返回引數格式依照jquery.ajax習慣; * 其他引數同WebUploader */ $('#slPicBtn').diyUpload({ //外掛中的方法名 url:'/NewWanbu/App/Photo/index.php/Photo/upload', success:function( data ) { console.info( data ); }, error:function( err ) { console.info( err ); } }); //全部上傳結束後觸發; if($('#stepsCont').children().eq(1)){ //控制進度條的程式碼 $('#nextStep').click(function(){ $('#steps').children().eq(2).addClass('active'); $('#prevStep').remove(); $('#stepsCont').children().eq(1).hide(); }) } function hasAlreadyFinish(n){ var nowNum = $('.diySuccess').length; var n = 1; if(n<=nowNum){ n++; } $('#nowNum').text(n); }
js外掛中程式碼:
(function( $ ) { $.fn.extend({ /* * 上傳方法 opt為引數配置; * serverCallBack回撥函式 每個檔案上傳至服務端後,服務端返回引數,無論成功失敗都會呼叫 引數為伺服器返回資訊; */ diyUpload:function( opt, serverCallBack ) { if ( typeof opt != "object" ) { alert('引數錯誤!'); return; } var $fileInput = $(this); var $fileInputId = $fileInput.attr('id'); //組裝引數; if( opt.url ) { opt.server = opt.url; delete opt.url; } if( opt.success ) { var successCallBack = opt.success; delete opt.success; } if( opt.error ) { var errorCallBack = opt.error; delete opt.error; } //迭代出預設配置 $.each( getOption( '#'+$fileInputId ),function( key, value ){ opt[ key ] = opt[ key ] || value; }); if ( opt.buttonText ) { opt['pick']['label'] = opt.buttonText; delete opt.buttonText; } var webUploader = getUploader( opt ); if ( !WebUploader.Uploader.support() ) { alert( ' 上傳元件不支援您的瀏覽器!'); return false; } //繫結檔案加入佇列事件; webUploader.on('fileQueued', function( file ) { createBox( $fileInput, file ,webUploader); }); //進度條事件 webUploader.on('uploadProgress',function( file, percentage ){ var $fileBox = $('#fileBox_'+file.id); var $diyBar = $fileBox.find('.diyBar'); $diyBar.show(); percentage = percentage*100; showDiyProgress( percentage.toFixed(2), $diyBar); }); //全部上傳結束後觸發; webUploader.on('uploadFinished', function(){ $('.diyButton').remove(); $fileInput.hide(); $('#stepsCont').children().eq(1).show(); $('#stepsCont').children().eq(0).hide(); $('#steps').children().eq(1).addClass('active'); $('.pic_operation').find('em').html('上傳成功'); $('#prevStep').remove(); $('#nextStep').text('完成'); }); //繫結傳送至服務端返回後觸發事件; webUploader.on('uploadAccept', function( object ,data ){ if ( serverCallBack ) serverCallBack( data ); }); //上傳成功後觸發事件; webUploader.on('uploadSuccess',function( file, response ){ var $fileBox = $('#fileBox_'+file.id); var $diyBar = $fileBox.find('.diyBar'); $fileBox.removeClass('diyUploadHover'); $diyBar.fadeOut( 1000 ,function(){ $fileBox.children('.diySuccess').show(); }); if ( successCallBack ) { successCallBack( response ); } }); //上傳失敗後觸發事件; webUploader.on('uploadError',function( file, reason ){ var $fileBox = $('#fileBox_'+file.id); var $diyBar = $fileBox.find('.diyBar'); showDiyProgress( 0, $diyBar , '上傳失敗!' ); var err = '上傳失敗! 檔案:'+file.name+' 錯誤碼:'+reason; if ( errorCallBack ) { errorCallBack( err ); } }); //選擇檔案錯誤觸發事件; webUploader.on('error', function( code ) { var text = ''; switch( code ) { case 'F_DUPLICATE' : text = '該檔案已經被選擇了!' ; break; case 'Q_EXCEED_NUM_LIMIT' : text = '上傳檔案數量超過限制!' ; break; case 'F_EXCEED_SIZE' : text = '檔案大小超過限制!'; break; case 'Q_EXCEED_SIZE_LIMIT' : text = '所有檔案總大小超過限制!'; break; case 'Q_TYPE_DENIED' : text = '檔案格式不支援!'; break; default : text = '未知錯誤!'; break; } if(text != "該檔案已經被選擇了!"){ alert( text ); } }); } }); //Web Uploader預設配置; function getOption(objId) { /* * 配置檔案同webUploader一致,這裡只給出預設配置. * 具體參照:http://fex.baidu.com/webuploader/doc/index.html */ return { //按鈕容器; pick:{ id:objId, label:"點選選擇圖片" }, //型別限制; accept:{ title:"Images", extensions:"gif,jpg,png", mimeTypes:"image/*" }, //swf路徑 swf: '/NewWanbu/App/Photo/Tpl/Public/Uploader.swf', disableGlobalDnd: true, //配置生成縮圖的選項 thumb:{ width:170, height:150, // 圖片質量,只有type為`image/jpeg`的時候才有效。 quality:70, // 是否允許放大,如果想要生成小圖的時候不失真,此選項應該設定為false. allowMagnify:false, // 是否允許裁剪。 crop:true, // 為空的話則保留原有圖片格式。 // 否則強制轉換成指定的型別。 type:"image/jpeg" }, //檔案上傳方式 method:"POST", //伺服器地址; server:"", //是否已二進位制的流的方式傳送檔案,這樣整個上傳內容php://input都為檔案內容 sendAsBinary:false, // 開起分片上傳。 thinkphp的上傳類測試分片無效,圖片丟失; chunked:true, // 分片大小 chunkSize:512 * 1024, //最大上傳的檔案數量, 總檔案大小,單個檔案大小(單位位元組); fileNumLimit:50, fileSizeLimit:50 * 2097152, fileSingleSizeLimit: 2097152 //2M }; } //例項化Web Uploader function getUploader( opt ) { return new WebUploader.Uploader( opt );; } //操作進度條; function showDiyProgress( progress, $diyBar, text ) { if ( progress >= 100 ) { progress = progress + '%'; text = text || '上傳完成'; }else{ progress = progress + '%'; text = text || progress; } var $diyProgress = $diyBar.find('.diyProgress'); var $diyProgressText = $diyBar.find('.diyProgressText'); $diyProgress.width( progress ); $diyProgressText.text( text ); } //取消事件; function removeLi ( $li ,file_id ,webUploader) { webUploader.removeFile( file_id ); if ( $li.siblings('li').length <= 0 ) { $li.parents('.parentFileBox').remove(); } else { $li.remove(); } } //建立檔案操作div; function createBox( $fileInput, file, webUploader ) { var file_id = file.id; var $parentFileBox = $fileInput.next('.parentFileBox'); //新增父系容器; if ( $parentFileBox.length <= 0 ) { var div = '<div class="parentFileBox"> \ <ul class="fileBoxUl"></ul>\ </div>'; $fileInput.after( div ); $parentFileBox = $fileInput.next('.parentFileBox'); } //建立按鈕 if ($('.up_btn').find('.diyButton').length <= 0 ) { var div = '<div class="diyButton"> \ <a class="diyStart" href="javascript:void(0)">開始上傳</a> \ <a class="diyCancelAll" style="display:none" href="javascript:void(0)">全部取消</a> \ </div>'; $('.up_btn').append( div ); var $startButton = $('.up_btn').find('.diyStart'); var $cancelButton = $('.up_btn').find('.diyCancelAll'); //開始上傳,暫停上傳,重新上傳事件; var uploadStart = function (){ webUploader.upload(); $('.btn').find('strong').show(); } //繫結開始上傳按鈕; $startButton.one('click',uploadStart); } //新增子容器; var li = '<li id="fileBox_'+file_id+'" class="diyUploadHover"> \ <div class="viewThumb"></div> \ <div class="diyCancel"></div> \ <div class="diySuccess"></div> \ <div class="diyFileName">'+file.name+'</div>\ <div class="diyBar"> \ <div class="diyProgress"></div> \ <div class="diyProgressText">0%</div> \ </div> \ </li>'; $parentFileBox.children('.fileBoxUl').append( li ); //父容器寬度; var $width = $('.fileBoxUl>li').length * 190; var $maxWidth = $fileInput.parent().width(); $width = $maxWidth > $width ? $width : $maxWidth; $parentFileBox.width( $width ); var $fileBox = $parentFileBox.find('#fileBox_'+file_id); //繫結取消事件; var $diyCancel = $fileBox.children('.diyCancel').one('click',function(){ removeLi( $(this).parent('li'), file_id, webUploader ); }); if ( file.type.split("/")[0] != 'image' ) { var liClassName = getFileTypeClassName( file.name.split(".").pop() ); $fileBox.addClass(liClassName); return; } //生成預覽縮圖; webUploader.makeThumb( file, function( error, dataSrc ) { if ( !error ) { $fileBox.find('.viewThumb').append('<img src="'+dataSrc+'" >'); } var slNum = $.trim($('.fileBoxUl').children().length); $('.diyCancel').click(function(){ if(slNum>0){ slNum--; $('#slNum').html(slNum); } }) $('#slNum').html(slNum); }); //新增流程操作按鈕及上傳顯示 $('.pic_operation').show(); $('#slPicBtn').css({'position':'absolute','top':'178px','right':'156px','opacity': '0','filter':'alpha(opcacity=0)','width':'88px','height':'30px','line-height':'30px'}); $('#slPicBtn').find('.webuploader-pick').text('繼續新增').css({'backgroundColor':'#FFF','border':'1px solid #B4B4B4','color':'#6C6C6C'}); $('.pic_con').hide(); $('.pic_con').next().next().hide(); } //獲取檔案型別; function getFileTypeClassName ( type ) { var fileType = {}; var suffix = '_diy_bg'; fileType['jpg'] = 'jpg'; fileType['jpeg'] = 'jpeg'; fileType['png'] = 'png'; fileType['gif'] = 'gif'; return fileType+suffix; } })( jQuery );
圖片選擇完成後點選‘開始上傳’按鈕上傳圖片,上傳完成後頁面展示如下圖:
可以修改或者刪除圖片,也可以點選‘全選圖片’按鈕,批量刪除圖片,或者選擇多張圖片刪除:
PHP上傳圖片程式碼:
//上傳圖片
public function upload(){
import("ORG.Net.UploadFile");
$wallid = $this->$wallid;
$path = SITE_PATH."/Uploads/photo/".$wallid.'/img/';//原圖片儲存目錄
$path_thumb = SITE_PATH."/Uploads/photo/".$wallid.'/thumb/';//縮圖儲存目錄
//建立圖片儲存目錄並附許可權
if(!file_exists(SITE_PATH."/Uploads/photo/".$wallid)){
mkdir(SITE_PATH."/Uploads/photo/".$wallid, 0777);
}
if(!file_exists($path)){
mkdir($path, 0777);
}
if(!file_exists($path_thumb)){
mkdir($path_thumb, 0777);
}
$upload = new UploadFile();
$upload->maxSize = 1024*1024*2;
$upload->allowExts = array('jpg', 'gif', 'png', 'jpeg');
$upload->savePath = $path;
$upload->thumb = true;
$upload->thumbPrefix='m_,s_';
$upload->thumbPath=$path_thumb;
$upload->thumbMaxWidth='600,300';
$upload->thumbMaxHeight='400,200';
$upload->thumbRemoveOrigin=false;
if(!$upload->upload()) {
exit(json_encode( array( 'status'=>'0','info'=>$upload->getErrorMsg() ) ));
}else{
$info = $upload->getUploadFileInfo();
}
$size = $info['0']['size'];
$imgname = $info['0']['name'];
$savename = $info['0']['savename'];
$extension = $info['0']['extension'];
if($size > 1024*1024*2){
exit(json_encode( array( 'status'=>'2','info'=>"檔案大小超過限制")));
}else{
if($extension=="jpg" || $extension=="JPG" || $extension=="gif" || $extension=="GIF" || $extension=="png" || $extension=="PNG" || $extension=="bmp" || $extension=="BMP"){
//具體需求操作
}else{
exit(json_encode( array( 'status'=>'3','info'=>"上傳檔案格式錯誤")));
}
}
}
到此,批量上傳圖片就全部實現了,但是有一個bug一直困擾了小編很久,就是有些圖片原圖會成功上傳,但縮圖會上傳成黑色的圖片,如圖:
如果聰明的你知道的話,記得分享一下哈。