thinkphp5多图上传+同时删除本地文件

在项目中常会用到多图上上传，那就须要多图上传后须要预览，而且能删掉传错（不想传）的图，然而 测试了半天 并不知道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一直增大，暂时没有想到什么好的办法解决。

固然还有别的方法，这里就不一一阐述了。

 

最近添加了在点击前台的删除图片按钮时候,同时删除本地文件的方法,用ajax执行,代码以下

js部分修改后以下:

 

 偶尔会报错 说找不到parentNode,可是本地文件又已经被删除了,不知道为何.操做不太快的状况下不会出现这种状况

 

另外留一个可让图片在div里居中的方法 , 百度了一堆,这个最好使

出来的效果大概是这样: