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

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

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.操作完成了

时间: 2024-10-12 01:40:41

关于多图上传的修改的操作的相关文章

微信jssdk多图上传

微信官方文档uploadImage函数一次只能上传一张图片,但实际运用中有不少多图上传的需求 当选择多张图片时若直接循环多次调用,只有最后一张能上传成功,因为uploadImage只有在上次一执行成功或者失败以后才能再次调用,因此把该函数稍作修改即可 //选择图片function choose(num){ wx.chooseImage({ count: num, // 默认9 sizeType: ['compressed'], success: function (res) { var loca

yii2组件之多图上传插件FileInput的详细使用

作者:白狼 出处:http://www.manks.top/yii2_multiply_images.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利. 文件上传也写过几篇文章了,包括最基本的yii2文件上传.异步上传到又拍云以及百度编辑器图片上传的问题,貌似不说点多图上传的就不完美. 今天介绍一款多图上传的插件 FileInput,至于为什么选中了TA作为我们上传的插件,一来这货跟Yii2有一腿,用起来方便:二来嘛

thinkphp/thinkcmf多图上传并保存到数据库

&&思路:图片和一些信息一起上传,先把信息用ajax提交到添加数据的function,添加成功后取到此条信息的主键,存session,返回模板ajax接收返回的信息,接收完毕后,再把多图上传的from表单提交,取到图片的信息,循环后拼接图片路径,根据session存的主键值修改(save)信息(smeta)到数据库,结束 &&这里特别说一下这个 multiple="multiple" 添加上这个之后可以一次选择多个文件进行上传,是 html5 的新属性

UEditor中多图上传的bug

多图上传 预览:支持浏览器版本  IE8以上 在线管理:由于存在bug,显示不了 ueditor-1.1.1.jar解压后找到FileManager 1.修改com.baidu.ueditor.hunter.FileManager类下的一个方法,修改如下: 源代码: private String getPath ( File file ) { String path = file.getAbsolutePath(); return path.replace( this.rootPath, "/&

JS案例之4——Ajax多图上传

近期项目中有好几次用到多图上传,第一次在项目中真正用到Ajax技术,稍微整理了下,贴个案例出来. 我们传统的做法是当用户提交一个表单时,就向web服务器端发送一个请求.服务器接受并处理传来的表单信息,处理完成后返回一个新的页面.这个做法比较浪费带宽,当请求数较多时,页面响应的时间就依赖于服务器处理的时间. 而Ajax应用仅向服务器发送并取回必需的数据,其他不需要的数据不用响应,它使用SOAP或其它一些基于XML的web service接口,并在客户端采用JS来处理来自服务器的响应.因此在服务器和

TP5.0中多图上传文件名重复问题

最近在做项目的时候出现了一个问题,这里记录一下: 问题: 使用TP5.0框架自带的文件上传方法后,发现多图上传可能会出现文件名重复的问题. 问题代码: 找到TP5框架上传文件命名方法,/thinkphp/library/think/File.php文件,buildSaveName方法(第394行): case 'date': $savename = date('Ymd') . DS . md5(microtime(true)); break; 解决办法: 文件命名方法可以修改一下: case '

多图上传控制器及模型代码(2)thinkphp5+layui实现多图上传保存到数据库,可以实现图片自由排序,自由删除。

公共css代码 <style> .layui-upload-img { width: 90px; height: 90px; margin: 0; } .pic-more { width:100%; left; margin: 10px 0px 0px 0px;} .pic-more li { width:90px; float: left; margin-right: 5px;} .pic-more li .layui-input { display: initial; } .pic-mor

dedecmsV5.7 百度编辑器ueditor 多图上传 在线管理 排序问题

问题:dedecms后台百度编辑器ueditor的多图上传-在线管理的图片排序有问题,想把这个顺序调成按照文件修改时间倒序来展示 解决方法: 1.打开/include/ueditor/php/aciton_list.php 在最后添加下面这个方法 function array_sort($array,$row,$type){ $array_temp = array(); $arr=array(); foreach($array as $v){ $array_temp[$v[$row]] = $v

Java企业微信开发_08_JSSDK多图上传

一.本节要点 1.1可信域名 所有的JS接口只能在企业微信应用的可信域名下调用(包括子域名),可在企业微信的管理后台“我的应用”里设置应用可信域名.这个域名必须要通过ICP备案,不然jssdk会配置失败 1.2JS-SDK使用权限签名算法 1.2.1 签名生成规则如下: (1)参与签名的字段包括: noncestr(随机字符串), 有效的jsapi_ticket, timestamp(时间戳), url(当前网页的URL,不包含#及其后面部分) . (2)对所有待签名参数按照字段名的ASCII