zoukankan      html  css  js  c++  java
  • 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里居中的方法 , 百度了一堆,这个最好使

    出来的效果大概是这样:

    技术最菜,头发最少
  • 相关阅读:
    B
    B
    G
    F
    E
    A
    C
    2017icpc 乌鲁木齐网络赛
    bzoj 2038 小Z的袜子(hose)(莫队算法)
    矩阵快速幂刷题系列
  • 原文地址:https://www.cnblogs.com/gushengyan/p/8646792.html
Copyright © 2011-2022 走看看