layui上传多张图片

之前找的一歌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 Uploaderfunction 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);}

希望会帮助到大家

layui上传多张图片相关推荐

怎么接收layui上传的文件_layui 上传文件_批量导入数据UI的方法
使用layui的文件上传组件,可以方便的弹出文件上传界面. 效果如下: 点击[批量导入]按钮调用js脚本importData(config)就可以实现数据上传到服务器. 脚本: /*** * 批量导入 ...
高手教你PHP上传多张图片
高手教你PHP上传多张图片对于我们来说上传一张图片是非常简单的事情,这里教大家一个关于PHP上传多张图片的代码分析,希望对大家有帮助. 学习PHP时,你可能会遇到PHP上传多张图片问题,这里将介绍P ...
ajax请求多张图片数据库,ajax上传多文件，一次上传多张图片
ajax上传多文件,一次上传多张图片作者:PHPYuan 时间:2018-11-04 03:41:44 使用ajax上传文件,指望这个对象:let fd = new FormData(); html ...
php上传多张图片为什么只显示一张,javascript,_js多张图片上传也拿到多张图片的路径在页面上展示只显示一张？只执行了一次？？？，javascript - phpStudy...
js多张图片上传也拿到多张图片的路径在页面上展示只显示一张?只执行了一次??? js多张图片上传也拿到多张图片的路径在页面上展示只显示一张?只执行了一次??? self.$els.upload ...
如何在IPFS里面上传一张图片
之前有好几人问过小编,想在IPFS里面上传一张图片.如何做? 今天小编就讲一下如何在IPFS里面上传.下载文件? 1 下载IPFS软件下载地址:https://dist.ipfs.io/#go-ip ...
okhttp上传图片和其他参数_Android中Okhttp3实现上传多张图片同时传递参数_放手_前端开发者...
之前上传图片都是直接将图片转化为io流传给服务器,没有用框架传图片. 最近做项目,打算换个方法上传图片. Android发展到现在,Okhttp显得越来越重要,所以,这次我选择用Okhttp上传图片. ...
[前台]---js重复上传一张图片两次,第二次失败的解决办法和思路
js重复上传一张图片两次,第二次会失败,解决办法就是修改input的value值. 先上代码: <input style="display:none" type=" ...
iOS -- 上传多张图片后台(PHP)代码和上传一张的一样
// 上传多张图片 - (void)send {// 设置初始记录量为0self.count = 0;self.upcount = 0;// 设置初始值为NOself.isUploadPictures ...
thinkphp3.2+cropper上传多张图片剪切图片
实现效果截图点加号可以继续上传第二张图片代码部<--引入cropper相关文件--> <link rel="stylesheet" href="/h ...
php用jquery-ajax上传多张图片限制图片大小
php用jquery-ajax上传多张图片限制图片大小 /*** 上传图片,默认大小限制为3M* @param String $fileInputName* @param number $size*/ ...

layui上传多张图片

layui上传多张图片相关推荐

最新文章

热门文章