thinkphp5多图上传 js部分
在项目中常会用到多图上上传,那就需要多图上传后需要预览,并且能删掉传错(不想传)的图,然而 测试了半天 并不知道jq怎么写,parent()parents()用了半天无果,罢了,还是用原生js来写。这就涉及到了parentNote,子元素的父元素。
于是在添加图片的时候很简单,一个id为img的盒子里放上传后的预览图,一个id为hidden_input的盒子用来装隐藏域
html代码如下:


js代码:

由于在原生js当中,要删除该元素只能通过父元素删除子元素的方法,规定我们要知道自己删除的是哪个元素并且知道它的父元素是谁。所以就要找父元素,可能还要找爷爷,甚至太爷爷...
至于在后台,如果是一个一条的数据,直接添加就可以,如果是当前图片路径需要放在一个字段里,用implore()合并一下再放就可以了。
需要说一下的是:因为是改的现有后台模板文件,于是传过来的过程中会多一个name为file 的隐藏域,并且没看懂它是怎么出来的,这就导致了我后台拿数据的时候很伤感,原本的严格字段模式又不想懂,于是百度了一下,发现可以用strict(false)l来暂时关掉严格模式,不影响全局。
如下:

当然,如果你是通过表连接查处的几条images数据的话,修改的时候,在新数据上传之前,需要把旧有的数据清空;比如你遍历出id为1,2,3,user_id同为1的三张图片,所以现在有三个隐藏域,3个img,点击那个在页面上同样会消失,但是后台数据不会更改,于是需要先把这三条删除,再上传新的数据,不过这样会导致id一直增大,暂时没有想到什么好的办法解决。
当然还有别的方法,这里就不一一阐述了。
thinkphp5多图上传 js部分的更多相关文章
- Thinkphp5 多图上传
html代码 <div class="content" id="content_list"> <!-- 上传部分 --> <for ...
- JS案例之4——Ajax多图上传
近期项目中有好几次用到多图上传,第一次在项目中真正用到Ajax技术,稍微整理了下,贴个案例出来. 我们传统的做法是当用户提交一个表单时,就向web服务器端发送一个请求.服务器接受并处理传来的表单信息, ...
- js formData图片上传(单图上传、多图上传)后台java
单图上传 <div class="imgUp"> <label>头像单图</label> <input type=&quo ...
- PHP 多图上传,图片批量上传插件,webuploader.js,百度文件上传插件
PHP 多图上传,图片批量上传插件,webuploader.js,百度文件上传插件(案例教程) WebUploader作用:http://fex.baidu.com/webuploader/gett ...
- 多图上传控制器及模型代码(2)thinkphp5+layui实现多图上传保存到数据库,可以实现图片自由排序,自由删除。
公共css代码 <style> .layui-upload-img { width: 90px; height: 90px; margin: 0; } .pic-more { width: ...
- thinkphp+layui多图上传(1)thinkphp5+layui实现多图上传保存到数据库,可以实现图片自由排序,自由删除。
公共css代码 <style> .layui-upload-img { width: 90px; height: 90px; margin: 0; } .pic-more { width: ...
- thinkphp5,单图,多图,上传
/** * 上传单图 */ function upload($path, $filename) { $file = request()->file($filename); $info = $fi ...
- PHP之:多图上传
撰写日期:2016-6-30 15:17:35 Thursday 参考 http://a3147972.blog.51cto.com/2366547/1381136 (08-05ThinkPHP+sw ...
- 微信jssdk,实现多图上传的一点心得
一.首先在common.js里封装一个函数,在需要调用jsSDK的页面引用此方法即可实现微信的信息配置function signatureJSSDK() { var url = window.loca ...
随机推荐
- Web渗透测试笔记(基础部分)
信息收集: dns信息收集 格式:dns... -参数 域名 -参数 示例: root@xxSec:~# dnsenum baidu.com root@xxSec:~# dnsenum -f dns. ...
- js数据类型的判断方法
判断js中的数据类型有一下几种方法:typeof.instanceof. constructor. prototype. $.type()/jquery.type(),接下来主要比较一下这几种方法的异 ...
- VBR与CBR的区别是什么?
VBR是动态码率.CBR是静态码率. VBR(Variable Bitrate)动态比特率.也就是没有固定的比特率,压缩软件在压缩时根据音频数据即时确定使用什么比特率,这是以质量为前提兼顾文件大小的方 ...
- Flex中的FusionCharts 2D柱形图
1.2D柱形图源码 <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:f ...
- 利用PowerDesigner15在win7系统下对MySQL 进行反向工程(一)
利用PowerDesigner15在win7系统下对MySQL 进行反向工程 1.首先,安装以下的驱动 2.找到"C:\Windows\System32" 3.双击"od ...
- ftp搭建 与http服务访问
Linux安装ftp组件 1 FTP http://jingyan.baidu.com/article/380abd0a77ae041d90192cf4.html安装vsftpd组件 安装完后,有/e ...
- Django学习-20-信号
Django信号 使得某个操作之前能定制化一些任务 - 内置信号 pre_init # django的model执行其构造方法前,自动触发 post_ ...
- CentOS添加磁盘分区
(这里的磁盘在vmware workstation VM中添加) 1.关闭虚拟机,在虚拟机设置中添加一个硬盘,然后开启虚拟机. 2.使用fdisk -l命令查看,这时会发现一个为被使用的设备,有2G的 ...
- java类型转换详解(自动转换和强制转换)
自动转换 class Hello { public static void main(String[] args) { //自动转换 int a = 5; byte b = 6; int c = a ...
- 【BZOJ4869】相逢是问候(线段树,欧拉定理)
[BZOJ4869]相逢是问候(线段树,欧拉定理) 题面 BZOJ 题解 根据欧拉定理递归计算(类似上帝与集合的正确用法) 所以我们可以用线段树维护区间最少的被更新的多少次 如果超过了\(\varph ...