Thinkphp uses the webUpload plug-in to upload multiple images

I'm just a porter of code, referencing other people's fragmented integrations. The code
html part
integrated by the Eagle of East Yunnan

mainly creates a hidden field to facilitate jq to pass values ​​​​into the form

js
(function( $ ){
      // 当domReady的时候开始初始化
      $(function() {
         var $wrap = $('.uploader-list-container'),
            // 图片容器
            $queue = $( '
控制器 代码

When you click the upload button, enter the webupload method to configure the path for storage and filtering
The most important thing is to use ajaxReturn to return json The data is transferred to js

//商品图片上传
    public function webUpload(){
    $config = array(
        'mimes'         =>  array(), //允许上传的文件MiMe类型
        'maxSize'       =>  0, //上传的文件大小限制 (0-不做限制)
        'exts'          =>  array('jpg', 'gif', 'png', 'jpeg'), //允许上传的文件后缀
        'autoSub'       =>  true, //自动子目录保存文件
        'subName'       =>  array('date', 'Y-m-d'), //子目录创建方式，[0]-函数名，[1]-参数，多个参数使用数组
        'rootPath'      =>  'Upload/', //保存根路径
        'savePath'      =>  'Goods/',//保存路径
    );
    $upload = new \Think\Upload($config);// 实例化上传类
    $info   =   $upload->upload();
    if(!$info) {
        $this->error($upload->getError());// 上传错误提示错误信息
    }else{// 上传成功
        foreach ($info as $va){
                $suoluetu.="./Upload/".$va['savepath'].$va['savename']."||";
                $this->ajaxReturn($suoluetu);
        }
    }
}
js 接收

Use the uploadSuccess method to receive the return information
Use response to get the image receiving address
Use the jq earch method to loop through the image address
The defined arr array must be placed outside the method to declare the global array
Use .push() to proceed Add the traversed elements
Finally add arr to the hidden field of the html interface

//ajax 成功返回地址
var arr    =  []; //定义全局数组
uploader.on('uploadSuccess',function(file,response){

   var imgurl = response; //上传图片的路径

   $(".imgfirst").each(function(){  //使用foreach 循环 地址
  arr.push(imgurl);   //地址追加进数组

   });

   $(".imgfirst").val(arr); //将地址写入到form表单
});

In this way, the multi-image upload is basically completed[/code]

tp.zip ( 5.87 MB download: 16 times )

🎜