Thinkphp verwendet das webUpload-Plug-in, um mehrere Bilder hochzuladen

Ich bin nur ein Code-Porter, der auf die fragmentierten Integrationen anderer Leute verweist. Der vom Eagle of East Yunnan integrierte Code
HTML-Teil
wird hauptsächlich in ein verstecktes Feld eingefügt, um jq die Übergabe von Werten an das Formular zu erleichtern

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

Wenn Sie auf die Schaltfläche „Hochladen“ klicken , geben Sie die Webupload-Methode ein und konfigurieren Sie den Speicherfilter.
Das Wichtigste ist, ajaxReturn zu verwenden, um JSON-Daten zurückzugeben und an js zu übertragen.

//商品图片上传
    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 接收

Verwenden Sie zum Empfangen die uploadSuccess-Methode die Rückgabeinformationen
Antwort verwenden, um die Bildempfangsadresse zu erhalten
JQ-Earch verwenden Die Methode durchläuft die Bildadresse in einer Schleife
Definieren Sie das arr-Array und deklarieren Sie das globale Array außerhalb der Methode
Verwenden Sie .push() um die durchquerten Elemente hinzuzufügen
Fügen Sie abschließend arr zum versteckten Feld der HTML-Schnittstelle hinzu

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

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

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

   });

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

Auf diese Weise ist das Hochladen mehrerer Bilder grundsätzlich abgeschlossen[/code]

tp.zip ( 5,87 MB heruntergeladen: 16 Mal)