之前找的一歌layui的项目，里面只有单张图片的上次，多张图片的看似很强大，但是代码较为复杂，涉及到后期上传到第三方服务器的，就会比较难搞。找了好几次，找到了多张图片上传的，特地分享一下
也可以同时选中多张图片
这个是效果,还带删除,调整位置
代码
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" } });另外会引入特定的js文件
/* * jQuery文件上传插件,封装UI,上传处理操作采用Baidu WebUploader; * @Author 黑爪爪; */ (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(){ $fileInput.next('.parentFileBox').children('.diyButton').remove(); }); //绑定发送至服务端返回后触发事件; 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; } alert( text ); }); return webUploader; } }); //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,jpeg,bmp,png", mimeTypes:"image/*" }, //配置生成缩略图的选项 thumb:{ width:160, height:120, // 图片质量，只有type为`image/jpeg`的时候才有效。 quality:90, // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false. allowMagnify:false, // 是否允许裁剪。 crop:true, // 为空的话则保留原有图片格式。 // 否则强制转换成指定的类型。 type:"image/jpeg" }, //文件上传方式 method:"POST", //服务器地址; server:"", //是否已二进制的流的方式发送文件，这样整个上传内容php://input都为文件内容 sendAsBinary:false, // 开起分片上传。 thinkphp的上传类测试分片无效,图片丢失; chunked:true, // 分片大小 chunkSize:512 * 1024, //最大上传的文件数量, 总文件大小,单个文件大小(单位字节); fileNumLimit:50, fileSizeLimit:500000 * 1024, fileSingleSizeLimit:50000 * 1024, }; } //实例化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'); $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); } //创建文件操作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; } //生成预览缩略图; 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); }希望会帮助到大家
