模板处理, 可以参考 checkbox 的。
注:edit 方法的 基本一样,需要先把已有的数据展示出来,绑定双击事件,删除图片 需要先绑定给已经展示出来的图片, uploadPicture 的callback 中只绑定给了新上传的图片
Application\Admin\Common/function.php function get_attribute_type 中 给$_type 添加一个元素
'pictures' => array('多图上传','TEXT NOT NULL'), 打开 Application/Admin/View/Think/add.html
找到 switch 标签 把 <case value="picture"> …… </case> 这段复制一份, 把 <case value="picture"> 改为 <case value="pictures"> 删除
<case value="pictures"> 里边的
<input type="hidden" name="{$field.name}" id="cover_id_{$field.name}"/> 修改
function uploadPicture{$field.name}(file, data){
var data = $.parseJSON(data);
var src = '';
var id=0; //新加的
if(data.status){
id = data.id;
$("#cover_id_{$field.name}").val(data.id);
src = data.url || '__ROOT__' + data.path;
//向原来的图片展示框中追加图片input 追加图片 ID $("#upload_picture_{$field.name}").parent().find('.upload-img-box').append(
'<div class="upload-pre-item" id="cover_picture_{$field.name}'+id+'"><img src="' + src + '" />'+
'<input type="hidden" name="{$field.name}[]" value="'+id+'" id="cover_id_{$field.name}'+id+'"/></div>'
);
// 绑定双击事件,删除图片,你也可以点击图片预览大图, 并写上删除图片方法,//你可以用ajax 从数据库中删除图片,
$("#cover_picture_{$field.name}"+id).on('dblclick',function(s){
$(this).remove();
$('#cover_id_{$field.name}'+id).remove(); })
} else {
updateAlert(data.info);
setTimeout(function(){
$('#top-alert').find('button').click();
$(that).removeClass('disabled').prop('disabled',false);
},1500);
}
} 数据处理, 可以参考 checkbox 的。
方法一;
Application\Admin\Controller/ThinkController.class.php protected function checkAttr 中 添加如下 (把提交过来的array 转为 string 以便存入数据库) }elseif('pictures'==$attr['type']){ // 多选型
$auto[] = array($attr['name'],'arr2str',3,'function'); //arr2str 、 serialize 、json_encode 都可以 或者在
模型管理-》字段管理-》 把对应的字段 的自动完成规则 设置 为 arr2str 、 serialize 、json_encode 都可以 编辑
<case value="pictures">
<div class="controls">
<input type="file" id="upload_picture_{$field.name}"> <div class="upload-img-box">
<notempty name="data[$field['name']]"> <volist name=":parse_field_attr($data[$field['name']])" id="vo">
<div class="upload-pre-item upload-pre-item{$field.name}" id="cover_picture_{$vo}"><img src="{$data[$field['name']]|get_cover='path'}"/>
<input type="hidden" name="{$field.name}[]" id="cover_id_{$vo}" value="{$vo}"/>
</div> </volist>
</notempty>
</div>
</div>
<script type="text/javascript">
//上传图片
/* 初始化上传插件 */
$("#upload_picture_{$field.name}").uploadify({
"height" : 30,
"swf" : "__STATIC__/uploadify/uploadify.swf",
"fileObjName" : "download",
"buttonText" : "上传图片",
"uploader" : "{:U('File/uploadPicture',array('session_id'=>session_id()))}",
"width" : 120,
'removeTimeout' : 1,
'fileTypeExts' : '*.jpg; *.png; *.gif;',
"onUploadSuccess" : uploadPicture{$field.name},
'onFallback' : function() {
alert('未检测到兼容版本的Flash.');
}
});
function uploadPicture{$field.name}(file, data){
var data = $.parseJSON(data);
var src = '';
var id=0;
if(data.status){
id = data.id;
$("#cover_id_{$field.name}").val(data.id);
src = data.url || '__ROOT__' + data.path;
$("#upload_picture_{$field.name}").parent().find('.upload-img-box').append(
'<div class="upload-pre-item" id="cover_picture_{$field.name}'+id+'"><img src="' + src + '" />'+
'<input type="hidden" name="{$field.name}[]" value="'+id+'" id="cover_id_{$field.name}'+id+'"/></div>'
); $("#cover_picture_{$field.name}"+id).on('dblclick',function(s){
$(this).remove();
})
} else {
updateAlert(data.info);
setTimeout(function(){
$('#top-alert').find('button').click();
$(that).removeClass('disabled').prop('disabled',false);
},1500);
}
}
$(".upload-pre-item{$field.name}").on('dblclick',function(s){
$(this).remove();
})
</script>
</case>

onethink多图上传的更多相关文章

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

    作者:白狼 出处:http://www.manks.top/yii2_multiply_images.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连 ...

  2. iOS 使用AFN 进行单图和多图上传

    图片上传时必要将图片进行压缩,不然会上传失败 1.单张图上传 AFHTTPRequestOperationManager *manager = [AFHTTPRequestOperationManag ...

  3. PHP之:多图上传

    撰写日期:2016-6-30 15:17:35 Thursday 参考 http://a3147972.blog.51cto.com/2366547/1381136 (08-05ThinkPHP+sw ...

  4. 微信jssdk,实现多图上传的一点心得

    一.首先在common.js里封装一个函数,在需要调用jsSDK的页面引用此方法即可实现微信的信息配置function signatureJSSDK() { var url = window.loca ...

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

    近期项目中有好几次用到多图上传,第一次在项目中真正用到Ajax技术,稍微整理了下,贴个案例出来. 我们传统的做法是当用户提交一个表单时,就向web服务器端发送一个请求.服务器接受并处理传来的表单信息, ...

  6. 微信企业号办公系统-JSSDK上传图片(多图上传)

    在开发微信企业号办公系统中,涉及到了图片上传功能,一开始使用的flash插件上传方法,在苹果手机上可以调用相机直接拍摄照片,但在安卓手机上只能选择照片. 微信jssdk-api带有一套完整的调用选择本 ...

  7. thinkphp3.2.x多图上传并且生成多张缩略图

    html部分 <!DOCTYPE html><html><head><meta http-equiv="Content-Type" con ...

  8. thinkphp5多图上传 js部分

    在项目中常会用到多图上上传,那就需要多图上传后需要预览,并且能删掉传错(不想传)的图,然而 测试了半天 并不知道jq怎么写,parent()parents()用了半天无果,罢了,还是用原生js来写.这 ...

  9. springBoot+ vue+ Element-ui实现合并多图上传(一次请求多张图片)

    这次上传使用的是Elemet-ui的uoload上传组件,组件预留的钩子回调还是比较充足的. 1:  实现多图上传主要用到以下两个属性: 下面讲一下属性使用: <el-upload :actio ...

随机推荐

  1. rugarch包与R语言中的garch族模型

    来源:http://www.dataguru.cn/article-794-1.html rugarch包是R中用来拟合和检验garch模型的一个包.该包最早在http://rgarch.r-forg ...

  2. 保护你的Linux系统的九个老生常谈

    在现在这个世道中,保障基于Linux的系统的安全是十分重要的.但是,你得知道怎么干.一个简单反恶意程序软件是远远不够的,你需要采取其它措施来协同工作.那么试试下面这些手段吧. 1. 使用SELinux ...

  3. 将自己写的组件封装成类似element-ui一样的库,可以cdn引入

    在写好自己的组件之后 第一步 修改目录结构 在根目录下创建package文件夹,用于存放你要封装的组件 第二部 在webpack配置中加入 pages与publicpath同级 pages: { in ...

  4. FFmpeg常用命令学习笔记(七)直播相关命令

    直播相关命令 主要涉及到直播中的推流和拉流 1.直播推流 ffmpeg -re -i out.mp4 -c copy -f flv rtmp://server/live/streamName -re: ...

  5. django中非菜单权限的归属

    非菜单权限的归属 :         1.设置表结构 : 在权限表中添加自连接的外键patent,parent_id连接permission表的id,可为空,当有parent_id时,说明它是一个普通 ...

  6. 2019牛客多校第四场B xor——线段树&&线性基的交

    题意 给你 $n$ 个集合,每个集合中包含一些整数.我们说一个集合表示一个整数当且仅当存在一个子集其异或和等于这个整数.现在你需要回答 $m$ 次询问 ($l, r, x$),是否 $l$ 到 $r$ ...

  7. 普通java类获取spring容器bean的方法

    很多时候,我们在普通的java类中需要获取spring的bean来做操作,比如,在线程中,我们需要操作数据库,直接通过spring的bean中构建的service就可以完成.无需自己写链接..有时候有 ...

  8. 以下是Direct 3d的安装步骤

    安装配置 真的是软肋 o( ̄ε ̄*)   我记录以下 步骤 防止下次忘记了 首先要安装到direct3d 之后在vs上配置  如下: 找到 安装direct3d的文件夹 复制路径(如下 我的路径为 G ...

  9. SpringMVC指定webapp的首页

    webapp的首页指的是http://localhost:8080/ 方法一 追加一个[/]URI的请求方法 @Controller public class WelcomeController { ...

  10. League of Leesins

    C - League of Leesins 首先找到每一串数字的头和尾两个数字,这两个数字有一个特点,就是它们在输入数据的时候都只会出现一次.我们在输出的时候用头和尾做第一数都可以. 然后第二个数只会 ...