在项目中常会用到多图上上传,那就需要多图上传后需要预览,并且能删掉传错(不想传)的图,然而 测试了半天 并不知道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部分的更多相关文章

  1. Thinkphp5 多图上传

    html代码 <div class="content" id="content_list"> <!-- 上传部分 --> <for ...

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

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

  3. js formData图片上传(单图上传、多图上传)后台java

    单图上传 <div class="imgUp">     <label>头像单图</label>     <input type=&quo ...

  4. PHP 多图上传,图片批量上传插件,webuploader.js,百度文件上传插件

    PHP  多图上传,图片批量上传插件,webuploader.js,百度文件上传插件(案例教程) WebUploader作用:http://fex.baidu.com/webuploader/gett ...

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

    公共css代码 <style> .layui-upload-img { width: 90px; height: 90px; margin: 0; } .pic-more { width: ...

  6. thinkphp+layui多图上传(1)thinkphp5+layui实现多图上传保存到数据库,可以实现图片自由排序,自由删除。

    公共css代码 <style> .layui-upload-img { width: 90px; height: 90px; margin: 0; } .pic-more { width: ...

  7. thinkphp5,单图,多图,上传

    /** * 上传单图 */ function upload($path, $filename) { $file = request()->file($filename); $info = $fi ...

  8. PHP之:多图上传

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

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

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

随机推荐

  1. java I/O框架 (三)基本流

    概述 基本流有字节输入输出流(InputStream,OutputStream),和字符输入输出流(Reader,Writer),它们都是抽象类,作为Java IO API中其他所有流的父类存在. 我 ...

  2. mysql数据库相关基本术语和概念

    1.DDL:Data Definition Language,即数据定义语言,定义数据库涉及的各种对象,定义数据的完整性约束.保密限制等约束. 2.DML:Data Manipulation Lang ...

  3. vxWorks/BootROM Imageq启动顺序详解

    vxWorks/BootROM Imageq启动顺序详解 VxWorks image     分为在ROM中运行和在RAM中运行两种,两者启动顺序的区别在于sysInit()函数的调用,该函数在RAM ...

  4. 【mongodb系统学习之二】mongodb的启动

    二.mongodb的启动: 1.在mongodb2.6.9的文件夹中建立data目录.logs目录以及   logs目录下的mongodb.log文件,如图: 2.进入到mongodb的bin目录中执 ...

  5. 基于am3358的led跑马灯测试

    #include <sys/ioctl.h> #include<stdio.h> #include <fcntl.h> #include <sys/types ...

  6. DirectX--给视频加马赛克、字符OSD

    在虚拟摄像头(CSourcefilter)的fillbuffer中添加代码,在打码区域50*50,像素分辨率1/10: for (int i=0;i<50;i++) { for (int k=0 ...

  7. Hive 编程之DDL、DML、UDF、Select总结

    Hive的基本理论与安装可参看作者上一篇博文<Apache Hive 基本理论与安装指南>. 一.Hive命令行 所有的hive命令都可以通过hive命令行去执行,hive命令行中仍有许多 ...

  8. Java高并发之从零到放弃

    前言 本篇主要讲解如何去优化锁机制或者克服多线程因为锁可导致性能下降的问题 ThreadLocal线程变量 有这样一个场景,前面是一大桶水,10个人去喝水,为了保证线程安全,我们要在杯子上加锁导致大家 ...

  9. 【BZOJ1010】【HNOI2008】玩具装箱(斜率优化,动态规划)

    [BZOJ1010][HNOI2008]玩具装箱 题面 题目描述 P教授要去看奥运,但是他舍不下他的玩具,于是他决定把所有的玩具运到北京.他使用自己的压缩器进行压缩,其可以将任意物品变成一堆,再放到一 ...

  10. UVA10692:Huge Mods

    题面 传送门 题意 输入正整数a1,a2,a3..an和模m,求a1^a2^...^an mod m Sol 首先有\[ a^b\equiv \begin{cases} a^{b\%\phi(p)}~ ...