之前找的一歌layui的項(xiàng)目，里面只有單張圖片的上次，多張圖片的看似很強(qiáng)大，但是代碼較為復(fù)雜，涉及到后期上傳到第三方服務(wù)器的，就會(huì)比較難搞。找了好幾次，找到了多張圖片上傳的，特地分享一下

也可以同時(shí)選中多張圖片

這個(gè)是效果,還帶刪除,調(diào)整位置

代碼

html代碼:

<div class="layui-form-item" style="width:200%;"><label class="layui-form-label">商品輪播圖</label><div><ul class="upload-ul clearfix"><li class="upload-pick"><div class="webuploader-container clearfix" id="goods_banners"></div></li></ul><p><button style="margin-left:110px;" type="button" class="layui-btn" id="upload-btn-banners">開始上傳</button></p></div></div>

js代碼

//上傳商品輪播圖var goods_banners = '';var $bannerUpload = $('#goods_banners').diyUpload({url:'/admin/upload/upload',success:function(resp) {if(resp.error == 0){goods_banners += resp.url + ',';}},error:function(err) { },buttonText : '',accept: {title: "Images",extensions: 'gif,jpg,jpeg,bmp,png'},thumb:{width:120,height:90,quality:100,allowMagnify:true,crop:true,type:"image/jpeg"}});

另外會(huì)引入特定的js文件

/* * jQuery文件上傳插件,封裝UI,上傳處理操作采用Baidu WebUploader;* @Author 黑爪爪;*/ (function( $ ) {$.fn.extend({/** 上傳方法 opt為參數(shù)配置;* serverCallBack回調(diào)函數(shù) 每個(gè)文件上傳至服務(wù)端后,服務(wù)端返回參數(shù),無(wú)論成功失敗都會(huì)調(diào)用 參數(shù)為服務(wù)器返回信息;*/diyUpload:function( opt, serverCallBack ) {if ( typeof opt != "object" ) {alert('參數(shù)錯(cuò)誤!');return;}var $fileInput = $(this);var $fileInputId = $fileInput.attr('id');//組裝參數(shù);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;}//迭代出默認(rèn)配置$.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;}//綁定文件加入隊(duì)列事件;webUploader.on('fileQueued', function( file ) {createBox( $fileInput, file ,webUploader);});//進(jìn)度條事件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);});//全部上傳結(jié)束后觸發(fā);webUploader.on('uploadFinished', function(){$fileInput.next('.parentFileBox').children('.diyButton').remove();});//綁定發(fā)送至服務(wù)端返回后觸發(fā)事件;webUploader.on('uploadAccept', function( object ,data ){if ( serverCallBack ) serverCallBack( data );});//上傳成功后觸發(fā)事件;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 );}});//上傳失敗后觸發(fā)事件;webUploader.on('uploadError',function( file, reason ){var $fileBox = $('#fileBox_'+file.id);var $diyBar = $fileBox.find('.diyBar');showDiyProgress( 0, $diyBar , '上傳失敗!' );var err = '上傳失敗! 文件:'+file.name+' 錯(cuò)誤碼:'+reason;if ( errorCallBack ) {errorCallBack( err );}});//選擇文件錯(cuò)誤觸發(fā)事件;webUploader.on('error', function( code ) {var text = '';switch( code ) {case 'F_DUPLICATE' : text = '該文件已經(jīng)被選擇了!' ;break;case 'Q_EXCEED_NUM_LIMIT' : text = '上傳文件數(shù)量超過(guò)限制!' ;break;case 'F_EXCEED_SIZE' : text = '文件大小超過(guò)限制!';break;case 'Q_EXCEED_SIZE_LIMIT' : text = '所有文件總大小超過(guò)限制!';break;case 'Q_TYPE_DENIED' : text = '文件類型不正確或者是空文件!';break;default : text = '未知錯(cuò)誤!';break;}alert( text );});return webUploader;}});//Web Uploader默認(rèn)配置;function getOption(objId) {/** 配置文件同webUploader一致,這里只給出默認(rèn)配置.* 具體參照:http://fex.baidu.com/webuploader/doc/index.html*/return {//按鈕容器;pick:{id:objId,label:""},//類型限制;accept:{title:"Images",extensions:"gif,jpg,jpeg,bmp,png",mimeTypes:"image/*"},//配置生成縮略圖的選項(xiàng)thumb:{width:160,height:120,// 圖片質(zhì)量，只有type為`image/jpeg`的時(shí)候才有效。quality:90,// 是否允許放大，如果想要生成小圖的時(shí)候不失真，此選項(xiàng)應(yīng)該設(shè)置為false.allowMagnify:false,// 是否允許裁剪。crop:true,// 為空的話則保留原有圖片格式。// 否則強(qiáng)制轉(zhuǎn)換成指定的類型。type:"image/jpeg"},//文件上傳方式method:"POST",//服務(wù)器地址;server:"",//是否已二進(jìn)制的流的方式發(fā)送文件，這樣整個(gè)上傳內(nèi)容php://input都為文件內(nèi)容sendAsBinary:false,// 開起分片上傳。 thinkphp的上傳類測(cè)試分片無(wú)效,圖片丟失;chunked:true,// 分片大小chunkSize:512 * 1024,//最大上傳的文件數(shù)量, 總文件大小,單個(gè)文件大小(單位字節(jié));fileNumLimit:50,fileSizeLimit:500000 * 1024,fileSingleSizeLimit:50000 * 1024,};}//實(shí)例化Web Uploaderfunction getUploader( opt ) {return new WebUploader.Uploader( opt );}//操作進(jìn)度條;function showDiyProgress( progress, $diyBar, text ) {if ( progress >= 100 ) {progress = progress + '%';text = text || '上傳完成';} else {progress = progress + '%';text = text || progress;}var $diyProgress = $diyBar.find('.diyProgress');$diyProgress.width( progress ).text( text );}//取消事件;function removeLi ( $li ,file_id ,webUploader) {webUploader.removeFile( file_id );$li.remove();}//左移事件;function leftLi ($leftli, $li) {$li.insertBefore($leftli);}//右移事件;function rightLi ($rightli, $li) {$li.insertAfter($rightli);}//創(chuàng)建文件操作div;function createBox( $fileInput, file, webUploader ) {var file_id = file.id;var $parentFileBox = $fileInput.parents(".upload-ul");var file_len=$parentFileBox.children(".diyUploadHover").length;//添加子容器;var li = '<li id="fileBox_'+file_id+'" class="diyUploadHover"> \<div class="viewThumb">\<input type="hidden">\<div class="diyBar"> \<div class="diyProgress">0%</div> \</div> \<p class="diyControl"><span class="diyLeft"><i></i></span><span class="diyCancel"><i></i></span><span class="diyRight"><i></i></span></p>\</div> \</li>';$parentFileBox.prepend( li );var $fileBox = $parentFileBox.find('#fileBox_'+file_id);//綁定取消事件;var $diyCancel = $fileBox.find('.diyCancel').one('click',function(){removeLi( $(this).parents('.diyUploadHover'), file_id, webUploader );});//綁定左移事件;$fileBox.find('.diyLeft').one('click',function(){leftLi($(this).parents('.diyUploadHover').prev(), $(this).parents('.diyUploadHover'));});//綁定右移事件;$fileBox.find('.diyRight').one('click',function(){rightLi($(this).parents('.diyUploadHover').next(), $(this).parents('.diyUploadHover') );});if ( file.type.split("/")[0] != 'image' ) {var liClassName = getFileTypeClassName( file.name.split(".").pop() );$fileBox.addClass(liClassName);return;}//生成預(yù)覽縮略圖;webUploader.makeThumb( file, function( error, dataSrc ) {if ( !error ) {$fileBox.find('.viewThumb').append('<img src="'+dataSrc+'" >');}});}//獲取文件類型;function getFileTypeClassName ( type ) {var fileType = {};var suffix = '_diy_bg';fileType['pdf'] = 'pdf';fileType['ppt'] = 'ppt';fileType['doc'] = 'doc';fileType['docx'] = 'doc';fileType['jpg'] = 'jpg';fileType['zip'] = 'zip';fileType['rar'] = 'rar';fileType['xls'] = 'xls';fileType['xlsx'] = 'xls';fileType['txt'] = 'txt';fileType = fileType[type] || 'ppt';return fileType+suffix;}})( jQuery );

PHP代碼

/*** 通用圖片上傳接口(上傳到本地)* @return \think\response\Json*/public function upload(){$config = ['size' => 2097152,'ext' => 'jpg,gif,png,bmp,jpeg'];$file = $this->request->file('file');$upload_path = str_replace('\\', '/', ROOT_PATH . 'public/uploads');$save_path = '/uploads/';$info = $file->validate($config)->move($upload_path);if ($info) {$result = ['error' => 0,'url' => str_replace('\\', '/', $save_path . $info->getSaveName())];} else {$result = ['error' => 1,'message' => $file->getError()];}return json($result);}

希望會(huì)幫助到大家

總結(jié)

以上是生活随笔為你收集整理的layui上传多张图片的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。