其实,多张图片上传功能跟单张图片上传功能一样,只不过多了一个遍历的过程罢了,我之前写过一篇比较适合大众化的多图片上传功能,今天来对thinkPHP框架多图片上传功能做一个分析,首先我们来看下单张图片上传的代码。

点击上传HTML

<tr>
         <td class="tableleft">封面</td>
       <td>
       <input id="thumbnail" type="text" name="pic" class="form-control modal-sm" readonly="readonly" />
       <input type="button" value="上传封面图" onclick="centerWindow('__URL__/uplife','upfile','400','200')" />
       <img id="photo" name="photo" style="display:none;width:30%;" /> ( * 必须是jpg,gif,png,并且200k内)
       </td>
   </tr>

弹窗HTML

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>上传文件</title>
</head>
<body>
 <form action="{:U('Admin/Product/upload')}" enctype="multipart/form-data" method="post" style="text-align:center;margin:30px;">
   <input type="file" name="photo" />
   <input type="hidden" name="MAX_FILE_SIZE" value="204800" />
   <input type="hidden" name="type" value="proimg"/>
   <input type="submit" value="确定上传">
 </form>
</body>
</html>

单张upload方法

public function upload(){
 $type=$_POST['type'];
 $upload = new \Think\Upload();// 实例化上传类
 $upload->maxSize   =     3145728 ;// 设置附件上传大小
 $upload->exts      =     array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
 $upload->rootPath  =     './Upload/image/'.$type.'/'; // 设置附件上传根目录
 $upload->savePath  =     ''; // 设置附件上传(子)目录
 $upload->subName  = array('date','Ymd');
 $upload->saveName = array('uniqid','');
 // $upload->saveName = '';
 // 上传文件
 $info   =   $upload->upload();
 $data['pubtime'] = NOW_TIME;
 if(!$info) {// 上传错误提示错误信息
     $this->error($upload->getError());
 }else{// 上传成功
   // die(var_dump($type));
   if($type=='proimg'){
     $data['path'] = '/Upload/image/proimg/'.$info['photo']['savepath'].$info['photo']['savename'];
     $this->alertOpenerClose($data['path']);
   }elseif($type=='newsimg'){
     $data['path'] = '/Upload/image/newsimg/'.$info['photo']['savepath'].$info['photo']['savename'];
     $this->alertOpenerClose($data['path']);
   }elseif($type=='honorimg'){
     $data['path'] = '/Upload/image/honorimg/'.$info['photo']['savepath'].$info['photo']['savename'];
     $this->alertOpenerClose($data['path']);
   }
 }


}

public function alertOpenerClose($_path){
   echo "<script type='text/javascript'>alert('上传完成');</script>";
   echo "<script type='text/javascript'>window.opener.document.getElementById('thumbnail').value ='$_path';</script>";
   echo "<script type='text/javascript'>window.opener.document.getElementById('photo').style.display='block';</script>";
   echo "<script type='text/javascript'>window.opener.document.getElementById('photo').src='$_path';</script>";
   echo "<script type='text/javascript'>window.close();</script>";
   exit();
 }

下面是多张图片的上传代码

点击HTML

<tr>
         <td class="tableleft">封面</td>
       <td>
       <input id="thumbnail" type="text" name="pic" class="form-control modal-sm" readonly="readonly" />
       <input type="button" value="上传封面图" onclick="centerWindow('__URL__/uplife','upfile','400','200')" />
       <div id="photo" name="photo" style="display:none;width:30%;" /> </div>( * 必须是jpg,gif,png,并且200k内)
       </td>
   </tr>

弹窗HTML

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>上传文件</title>
</head>
<body>
 <form action="{:U('Admin/Product/upload')}" enctype="multipart/form-data" method="post" style="text-align:center;margin:30px;">
   <input type="file" name="photo[]" multiple/>
   <input type="hidden" name="MAX_FILE_SIZE" value="204800" />
   <input type="hidden" name="type" value="proimg"/>
   <input type="submit" value="确定上传">
 </form>
</body>
</html>

从中我们对比上面的html代码,我们不难发现这行input不一样

<input type="file" name="photo[]" multiple/>

那么对于的$info=$upload->upload()就是一个多维数组,同时发现服务器文件夹已经多了三张图片

image.png

多张图片处理方法

public function alertOpenerCloses($arr){//传递过来的数组
   $pathstr=implode('%',$arr);
   foreach ($arr as $key => $value) {
     $imgstr.='<img src='.$value.' style="width:30%;" />';
   }
   echo "<script type='text/javascript'>alert('上传完成');</script>";
   echo "<script type='text/javascript'>window.opener.document.getElementById('thumbnail').value ='$pathstr';</script>";
   echo "<script type='text/javascript'>window.opener.document.getElementById('photo').style.display='block';</script>";
   echo "<script type='text/javascript'>window.opener.document.getElementById('photo').innerHTML='$imgstr';</script>";
   //innerHtml传入图片到点击后的html页面
   echo "<script type='text/javascript'>window.close();</script>";
   exit();
}

 public function uploads(){
   $type=$_POST['type'];
   $upload = new \Think\Upload();// 实例化上传类
   $upload->maxSize   =     3145728 ;// 设置附件上传大小
   $upload->exts      =     array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
   $upload->rootPath  =     './Upload/image/'.$type.'/'; // 设置附件上传根目录
   $upload->savePath  =     ''; // 设置附件上传(子)目录
   $upload->subName  = array('date','Ymd');
   $upload->saveName = array('uniqid','');
   // $upload->saveName = '';
   // 上传文件
   $info   =   $upload->upload();
   $data['pubtime'] = NOW_TIME;
   if(!$info) {// 上传错误提示错误信息
       $this->error($upload->getError());
   }else{// 上传成功
     // die(var_dump($type));
     if($type=='proimg'){
       foreach ($info as $key => $value) {
         $srcarr[]='/Upload/image/proimg/'.$value['savepath'].$value['savename'];//每个上传路径重新组成数组
       }
       $this->alertOpenerCloses($srcarr);
     }
   }
 }

最后的上传效果图如下所示

image.png

上面提及到的大众化的多张图片上传功能的介绍,请查阅:PHP实现一次性多张图片上传功能