Thinkphp 使用webUpload外掛多圖上傳

我只是程式碼的搬運工，參考其他人的零散整合。滇東之鷹大神整合的程式碼
html 部分
主要做了個隱藏域方便jq 傳值進入form表單 

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

點擊上傳按鈕時進入到webupload 方法配置好路徑進行存儲過濾
最重要的使用ajaxReturn按鈕返回json資料傳到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 接收

使用uploadSuccess 方法接收回傳訊息
使用response 取得圖片接收位址
使用jq earch 方法循環遍歷圖片位址
定義arr 數組必須放在方法體外聲明中使用全域數組進行加入遍歷的元素
最後將arr 加入到html介面隱藏域裡面

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

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

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

   });

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

這樣多圖上傳基本完成[/code]

tp.zip ( 5.87 MB 下載：16 次 )