tp5使用layui实现多个图片上传(带附件选择)的方法实例

第tp5使用layui实现多个图片上传(带附件选择)的方法实例buttontype="button"id="upload_img"多图片上传/button

aselectImg")}','1000','600')"href="javascript:;"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"

i#xe60a;/i选择图片

blockquote

预览图：

divid="demo2"/div

/blockquote

/div

inputname="url"type="hidden"

!--buttontype="button"--

!--测试--

!--/button--

div

labelfor=""

/label

buttontype="submit"lay-filter="add"lay-submit=""

/button

/div

/form

/div

style

.imgInput{

width:600px;

height:35px;

.layui-form-label{

font-size:14px;

width:100px;

select{

width:500px;

#pre_img{

display:none;

padding:5px;

border:1pxsolid#999;

#demo2{

display:flex;

display:-webkit-flex;

/*justify-content:space-between;*/

flex-direction:row;

flex-wrap:wrap;

.img{

width:150px;

height:150px;

.btnAdd{

margin-top:40px;

.img_item{

display:flex;

flex-direction:column;

text-align:center;

margin-right:20px;

margin-bottom:20px;

.delimg{

text-align:center;

line-height:20px;

width:160px;

height:20px;

background-color:red;

color:white;

margin-top:5px;

/style

script

functioncheck(){

$('input[name="url"]').val(urlList);

varstr=$('input[name="url"]').val();

if(str==''||str==null||str=='undefined'){

alert("请选择图片");

returnfalse;

functionselectImgGo($url,$urlWeb){

varindex=0;

if(urlList.length0){

index=urlList.length;

varimg=$([

'div',

'div',

'imgsrc="'+$urlWeb+'"alt="'+$url+'"/div',

'divid="delimg"elImg("'+index+'")href="javascript:;"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"删除/div/div'

].join(''));

$('#demo2').append(img);

urlList.push($url);

imgList.push($urlWeb);

varimgList=[];

varurlList=[];

layui.use(['upload','jquery'],function(){

$=layui.jquery;

varupload=layui.upload;

//多图片上传

upload.render({

elem:'#upload_img'

,url:"{:url('share/upload_img')}"//上传接口

,multiple:true

,before:function(obj){

//预读本地文件示例，不支持ie8

obj.preview(function(index,file,result){

,done:function(res){

varindex0=0;

if(urlList.length0){

index0=urlList.length;

varimg0=$([

'div',

'div',

'imgsrc="'+res.msg+'"/div',

'divid="delimg"elImg("'+index0+'")href="javascript:;"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"删除/div/div'

].join(''));

$('#demo2').append(img0);

urlList.push(res.url);

imgList.push(res.msg);

,error:function(){

//layer.close(layer.msg());//关闭上传提示窗口

//请求异常回调

functiondelImg(index){

urlList.splice(index,1);

imgList.splice(index,1);

$('#demo2').empty();

for(vari=0;iimgList.length;i++){

varimg0=$([

'div',

'div',

'imgsrc="'+imgList[i]+'"/div',

'divid="delimg"elImg("'+i+'")href="javascript:;"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"删除/div/div'

].join(''));

$('#demo2').append(img0);

/*选择图片*/

functionselectImg(title,url,w,h){

x_admin_show(title,url,w,h);

/script

/body

/html

php代码

//phplayui图片上传

publicfunctionupload_img(){

$file=request()-file('file');//获取上传的文件

if($file==null){

exit(json_encode(array('code'=1,'msg'='未上传图片')));

}else{

//5、对上传文件做出条件限制（类型，大小等）

$map=[

'ext'='jpg,png,gif,jpeg',//后辍名

'size'=320000000,//最大3M

//6、对上传的文件进行较验，如果合格就进行转移到预定设定好的public/uploads目录下

//返回保存的文件信息info，包括文件名和大小等数据

$info=$file-validate($map)-move(ROOT_PATH.'public/uploads/img');

//获取图片宽高

list($width,$height,$type,$attr)=getimagesize($info-getPathName());

if(is_null($info)){

$this-error($info-getError());

$img=str_replace('\\','/',$info-getSaveName());

//保存附件

$annexData['filesize']=$info-getInfo()['size'];

$annexData['mimetype']=$info-getInfo()['type'];

$annexData['filename']=$info-getInfo()['name'];

$annexData['imagewidth']=$width;

$annexData['imageheight']=$height;

$annexData['type']='img';

$annexData['url']=$img;

AAnnexModel::create($annexData);

$img=constant("URL")."/uploads/img/".$img;

exit(json_encode(array('code'=0,'msg'=$img,'url'=$annexData['url'])));

//多选图片添加页面

publicfunctionaddImages(){

if($this-request-isPost()){

//2、获取提交过来的数据，最后true参数，表示连上传