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 ...
随机推荐
- “大话架构”阿里架构师分享的Java程序员需要突破的技术要点
一.源码分析 源码分析是一种临界知识,掌握了这种临界知识,能不变应万变,源码分析对于很多人来说很枯燥,生涩难懂. 源码阅读,我觉得最核心有三点:技术基础+强烈的求知欲+耐心. 我认为是阅读源码的最核心 ...
- linux memcached Session共享
memcached memcached是高性能的分布式缓存服务器用来集中缓存数据库查询结果,减少数据库访问次数提高动态web应用的响应速度 传统web架构的问题许多web应用都将数据保存在RDBMS中 ...
- JavaScript过滤特殊字符
JavaScript过滤特殊字符 1.设计实例 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
- CAN总线简介
CAN总线简介 个节点,通信波特率为5Kbps~1Mbps,在通信的过程中要求每个节点的波特率保持一致(误差不能超过5%),否则会引起总线错误,从而导致节点的关闭,出现通信异常.
- MyEclipse之Widget is disposed
1 错误描述 2 错误原因 3 解决办法
- Intel_CS_WebRTC 验证性测试
机器: Centos 7.2 一.配置阿里云源 wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.163.com/.help/Cen ...
- poj1417菜鸡的详细题解(希望能帮助到和我一样陷于本题的新手)
题意太麻烦就偷懒转载他人的题意..... 题意转载自http://blog.csdn.net/acm_cxlove/article/details/7854526 by---cxlove ...
- 一个TokenUtils程序,亲测可用
1. Token用途 token是HTTP请求的令牌,通俗一点说是凭证,目的是防止api被随意访问获取信息. 可使用随机数生成,也可以使用用户id.密码或时间之类进行排序或者加密进行声称. token ...
- [Luogu2991][USACO10OPEN]水滑梯Water Slides
题面戳我 题面描述 受到秘鲁的马丘比丘的新式水上乐园的启发,Farmer John决定也为奶牛们建一个水上乐园.当然,它最大的亮点就是新奇巨大的水上冲浪. 超级轨道包含 E (1 <= E &l ...
- 1.3 java与C++有什么异同
相同点: 都是面向对象的语言,都使用了面向对象的思想(封装,继承,多态等),可重用性 不同点: 1.java没有指针,避免了指针可能引起的系统问题. 2.java不支持多重继承,C++可以.但java ...