关于多图上传的修改的操作

Posted 2020-10-08 年华-夜

这只是多图上传的修改操作,多图上传的操作也和这个差不多,试着来就是了

 

1.html的操作

 1   <td>
 2 
 3                             <ul id="photos" class="pic-list list-unstyled form-inline">
 4                                 <notempty name="tags.describe_pic">
 5                                     <foreach name="tags[‘describe_pic‘]" item="vo">
 6                                         <php>$img_url=cmf_get_image_preview_url($vo);</php>
 7                                         <li id="saved-image{$key}">
 8                                             <input id="photo-{$key}" type="hidden" name="describe_pic[]"
 9                                                    value="{$vo}"> //隐藏该input
10                                             <input disabled="disabled" type="hidden"  class="form-control" id="photo-{$key}-name" type="text"
11                                                    name="photo_names[]"
12                                                    value="{$vo|default=‘‘}" style="width: 200px;" title="图片名称"> //隐藏该input
13                                             <img id="photo-{$key}-preview"
14                                                  src="{:cmf_get_image_preview_url($vo)}"
15                                                  style="height:36px;width: 36px;"
16                                                  onclick="parent.imagePreviewDialog(this.src);">
17                                             <a href="javascript:uploadOneImage(‘图片上传‘,‘#photo-{$key}‘);">替换</a>
18                                             <a href="javascript:(function(){$(‘#saved-image{$key}‘).remove();})();">移除</a>
19                                         </li>
20                                     </foreach>
21                                 </notempty>
22                             </ul>
23                             <a href="javascript:uploadMultiImage(‘图片上传‘,‘#photos‘,‘photos-item-tpl‘);"
24                                class="btn btn-sm btn-default">选择图片</a>
25                         </td>

2.js的操作

 1 <style type="text/css">
 2     .pic-list li {
 3         margin-bottom: 5px;
 4     }
 5 </style>
 6 <script type="text/html" id="photos-item-tpl">
 7     <li id="saved-image{id}">
 8         <input id="photo-{id}" type="hidden" name="describe_pic[]" value="{filepath}">
 9         <img id="photo-{id}-preview" src="{url}" style="height:36px;width: 36px;"
10              onclick="imagePreviewDialog(this.src);">
11         <a href="javascript:uploadOneImage(‘图片上传‘,‘#photo-{id}‘);">替换</a>
12         <a href="javascript:(function(){$(‘#saved-image{id}‘).remove();})();">移除</a>
13     </li>
14 </script>

 

3.控制器的接收操作

 1         $intId = $this->request->param("id", 0, ‘intval‘);
 2         $data = $this->request->param();    
 3         if(empty($data[‘describe_pic‘])){
 4            $list =Db::name(‘style‘)
 5                 ->where(‘id‘,$intId)
 6                 ->find();
 7             $data[‘describe_pic‘] = $list[‘describe_pic‘];
 8         }else{
 9             $data[‘describe_pic‘] = serialize($data[‘describe_pic‘]);
10         }
11         Db::name(‘style‘)
12             ->where(‘id‘,$intId)
13             ->update($data);
14         $this->success("保存成功！",url("AdminStyle/index"));    

 

4.操作完成了