Home > php教程 > php手册 > body text

Thinkphp uses the webUpload plug-in to upload multiple images

ringa_lee
Release: 2018-05-11 11:52:49
Original
2855 people have browsed it

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 = $( '
控制器 代码
Copy after login

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 接收
Copy after login

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表单
});
Copy after login

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

Thinkphp uses the webUpload plug-in to upload multiple images tp.zip ( 5.87 MB download: 16 times )

🎜
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Recommendations
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!