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里居中的方法 , 百度了一堆,這個最好使

出來的效果大概是這樣: