thinkphp3.2处理多张图片上传(已成功)

来源:互联网 发布:网络短信软件哪个好 编辑:程序博客网 时间:2024/05/16 08:00

在做后台图片编辑和上传的时候往往会遇到比较棘手的问题,就是如何上传多张图片,本来以为要在input后面加个按钮,判断要添加的时候,在创一个input,这样子的话每个图片都有自己一个对应的name,这样后台便会拿到图片的路径。
不用以上方法,其实也很简单:
1.我们在表单form那里用数组去保存图片的name,再加上一个multiple,这样按住ctrl就可以多选了。

<input class="form-control" id="intro_pic" name="intro_pic[]" type='file' multiple="multiple"                                               placeholder="">

2.我们通过ajax异步提交表单的数据,但是这里要注意的是图片的数据不能通过序列化的形式提交上去,数据流不一样,要实例化formdata提交

var formData=new FormData($("#user_form")[0]);$.ajax({                    type: "POST",                    url: "<{:U('Admin/GameManager/Game/addGame')}>",                    dataType: 'json',                    processData: false,//去掉默认值                    contentType: false,//去掉默认值                    cache: false,                    data: formData,                    success:function(r){                        if(r.success){                            alert('添加成功');                            window.location.reload();//重新刷新一次                            $('#user_dialog').modal('hide');                        }                        else{                            alert("参数错误");                        }                    }                });

3.如上操作就可以发往控制器了,在控制器我写了一个公共函数去处理图片

 public function uploaldPic($data,$file){        $upload = new \Think\Upload();// 实例化上传类        $upload->maxSize   =     3145728 ;// 设置附件上传大小        $upload->exts      =     array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型        $upload->rootPath  =     './upload/'; // 设置附件上传根目录        $upload->savePath  =     ''; // 设置附件上传(子)目录        $upload->thumb              = true;        // 设置引用图片类库包路径        $upload->imageClassPath     = '@.ORG.Image';        //设置需要生成缩略图的文件后缀        $upload->thumbPrefix        = 'm_';        //设置缩略图最大宽度        $upload->thumbMaxWidth      = '200,100';        //设置缩略图最大高度        $upload->thumbMaxHeight     = '200,100';        //设置上传文件规则        $upload->saveRule           = 'uniqid';        $upload->replace           = true;        //删除原图        $upload->thumbRemoveOrigin  = true;        // 上传文件        $info=array();        $a = '';        //通过遍历把刚刚存入的图片。依次拼成图片路径,你们可以通过var_dump去查看输去内容        foreach ($file['intro_pic']['name'] as $key=>$value){            $file1=array();            $file1["intro_pic"]['name']=$value;            $file1["intro_pic"]['type']=$file['intro_pic']["type"][$key];            $file1["intro_pic"]['tmp_name']=$file['intro_pic']["tmp_name"][$key];            $file1["intro_pic"]['error']=$file['intro_pic']["error"][$key];            $file1["intro_pic"]['size']=$file['intro_pic']["size"][$key];            $info   =   $upload->upload($file1);            foreach ($info as $key=>$value)            {                     $a.="#".$value['savepath'].$value['savename'];//我用符号把图片路径拼起来             }        }        //把第一个#去掉,同时写进data数据库里面的intro_pic字段        $data["intro_pic"]=substr($a,1);        $info1   =  $upload->upload();        foreach ($info1 as $key=>$value)        {            $data["$key"]=$value['savepath'].$value['savename'];        }        return $data;    }

4.以上我们就存到我们的数据库了,那我们怎么把他们显示到视图上呢, 这个很简单了, 把图片路径用#切割一次,给视图做一次循环输出路径就可以,其中$result是查询返回的数据,包括图片字段。

foreach($result as $key =>$value){            $result[$key]['intro_pic'] = explode("#",$value['intro_pic']);//多张图片用#分开           }

5.最后一步,视图遍历

<foreach name="game_list" item="item">   <td class="text-left">//对该字段多张图片遍历,GAME_PATH是我自己定义的路径    <foreach name="item['intro_pic']" item="item_child">                                                 <img src="<{:C('GAME_PATH')}><{$item_child}>">                                                </foreach>      </td></foreach>

6.我是前端小白,给我一个赞我会充满动力0.0

原创粉丝点击