thinkphp3.2处理多张图片上传（已成功）

在做后台图片编辑和上传的时候往往会遇到比较棘手的问题，就是如何上传多张图片，本来以为要在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

thinkphp3.2处理多张图片上传（已成功）相关推荐

php上传多张图片为什么只显示一张,javascript,_js多张图片上传也拿到多张图片的路径在页面上展示只显示一张？只执行了一次？？？，javascript - phpStudy...
js多张图片上传也拿到多张图片的路径在页面上展示只显示一张?只执行了一次??? js多张图片上传也拿到多张图片的路径在页面上展示只显示一张?只执行了一次??? self.$els.upload ...
多组input文件，每组 multiple选择多张图片上传可增删其中任意一张图片，用formData对象实现（ajax，sync: false同步）
input .multiple选择多张图片时,需要删除其中的一张图片怎么做,大家都知道 input 中的文件是不能删除和更改的,只能清空,这里我的做法是定义一个对象储存器把需要的文件存在储存器中 f ...
调用android的拍照或本地相册选取再实现相片上传服务器,Android调用系统相机、本地相册上传图片(头像上传(裁剪)、多张图片上传)...
开发中基本上都会有头像上传的功能,有的app还需要多张图片同时上传,下面简单将头像上传以及多张图片上传功能整理一下.图片选择仿照微信选择图片的界面.[参考] 多图片选择器 !!!推荐一个动态权限请求的 ...
多组input文件，每组 multiple选择多张图片上传可增删其中任意一张图片，用formData对象实现；（ajax做异步，自己做延时同步）
input .multiple选择多张图片时,需要删除其中的一张图片怎么做,大家都知道 input 中的文件是不能删除和更改的,只能清空,这里我的做法是定义一个对象储存器把需要的文件存在储存器中 f ...
asp.net中使用Uploadify插件实现多张图片上传，上传后可显示缩略图、删除图片
本文为原创文章,欢迎转载!转载时请注明出处:http://blog.csdn.net/c_yang13 一.准备工具 1.jquery,我使用的是jquery-1.11.3.min.js 2.uplo ...
android h5 多图上传源码,JS移动端/H5同时选择多张图片上传并使用canvas压缩图片...
最近在做一个H5的项目,里边涉及到拍照上传图片的功能以及识别图片的功能,这里对识别图片的功能不做赘述,不属本文范畴.我在做完并上线项目后,同事跟我提了一个要求是可不可以同时选择多张图片上传,我做的时候 ...
php mysql上传多张图片_PHP实现一次性多张图片上传功能
原标题:PHP实现一次性多张图片上传功能最近遇到一个需求,就是多张图片上传,按住Ctrl键能选择多张图片一次性上传,上传成功后数据库保存图片的路径及图片原来的文件名.该功能一般在比较成熟的内容编辑器 ...
php实时上传多张图片,PHP实现多张图片上传预览功能
PHP实现多张图片上传预览功能,支持左右移动图片切换位置.删除图片,限制图片上传的数量等 - 向左移动图片 function reverse_left(obj) { var obj_li = obj. ...
php多图片上传封装类,php----图片上传封装类：单张，多张图片上传，生成缩略图...
<?php /** * 功能: 单张,多张图片上传,生成缩略图 * Class ImgUpload */ class ImgUpload { private $file; //文件信息 priv ...

thinkphp3.2处理多张图片上传（已成功）

thinkphp3.2处理多张图片上传（已成功）相关推荐

最新文章

热门文章