前一篇文章寫了如何把input=“file”的默認樣式改為自己想要的樣式所以這篇是在這個的基礎上寫的，也就是說改變成了自己想要的樣式之后，點擊選擇圖片，可以放在一個div中預覽，同時可以繼續添加，刪除，我這邊寫的是最多放8張，當然你也可以自定義
上一篇更改默認樣式的鏈接在這里：https://www.cnblogs.com/floweres/p/9091962.html
知識儲備（看別人的，其實我也不太懂window.URL.creatObjectURL的確切的意思，查了很久找到的，感覺說的比較詳細）：
1、 URL.createObjectURL() 靜態方法會創建一個 DOMString 。它的 URL 表示參數中的對象。這個 URL 的生命周期和創建它的窗口中的 document 綁定。
2、在每次調用 createObjectURL() 方法時，都會創建一個新的 URL 對象，即使你已經用相同的對象作為參數創建過。當不再需要這些 URL 對象時，每個對象必須通過調用 URL.revokeObjectURL() 方法來釋放。瀏覽器會在文檔退出的時候自動釋放它們，但是為了獲得最佳性能和內存使用狀況，你應該在安全的時機主動釋放掉它們。
這是寫好的HTML和css代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/iconfont.css" /> <title>仿淘寶中的評價曬單中選擇圖片可以預覽，添加，刪除</title> <script type="text/javascript" src="js/jquery.1.8.2.min.js" ></script> <style type="text/css"> *{margin: 0;padding: 0;} #allpic{width: 500px;margin: 0 auto;height: auto;display: none;} .square{width: 66px;margin:0 auto;margin-top:50px;height: 75px;border: 1px solid #eee;text-align: center;} .square img{width: 40px;margin-top: 10px;} input{display: none;} </style> </head> <body> <div class="choose"> <div id="allpic" style="width: 400px;height: auto;display: none;"></div> <!--這是想要的樣式--> <div class="square" onclick="show()"> <img id="photo" src="picture/camera.png"/> <p>傳圖曬單</p> </div> <!--這是要被隱藏的input--> <input type="file" multiple="multiple" name="file" id="file" accept="images/*" onchange="imgchange(this)"/> </div> </body> </html>
效果圖醬紫滴：
還是介紹一下前期的工作：整個頁面只出現了這個class為square的那個代碼塊（下面簡稱為square），input框和id為allpic(下面簡稱為allpic)是隱藏的，input框是點擊square時觸發的選擇文件這個功能，allpic是選擇了圖片之后出現的div塊，專門用來放img圖片的
下面是點擊square相當於點擊了input框的show()函數：
function show(){ document.getElementById("file").click(); }
下面是切入正題的時候了，感覺自己有點啰嗦了
大致思路是：
1.給input框一個onchange事件，即在改變input="file"中的內容時就觸發的函數
2.獲取到input框中的文件即img的個數
3.當img的個數小於等於8時(非必須，可自定義)在allpic中添加我們選擇好的img，給img添加一個動態的id和動態的src
下面是js:
function imgchange(obj){ var kk=document.getElementById("file").files.length;//獲取input中文件的長度 $("#allpic").css("display","block");//這是預覽的圖片放置的位置，在HTML中沒有點擊時是隱藏的，點擊選擇文件之后出現 var s=$("#allpic").find("img").length;//這是取得allpic中的img的個數 if(kk<=8){ for(var i=0;i<kk;i++){ $("#allpic").append("<span style='position: relative;'><img id='"+(s+i)+"' src='' style='width: 80px;height:80px;margin-right: 20px;margin-bottom: 10px'/><a style='position: absolute;right: 13px;top: -35px;width: 15px;height: 15px;line-height:13px;text-align:center;border-radius: 50%;background: #000;color: #fff;cursor: pointer;'>x</a></span>") //在#allpic中插入span標簽來放置img圖片，這里圖片的id是動態的，因為不確定客戶會傳多少張圖片。所以img的id是從1到8排下來的，后面的a標簽是圖片上面的叉號按鈕，之后會實現點擊之后圖片消失的效果 var imgurl=window.URL.createObjectURL(file.files[i]);//給img創建一個隨機的url地址以便可以添加到需要展示的img的src中 var img=document.getElementById(s+i);//給img創建一個動態的id,剛開始寫的時候是用的i當做的img的id,但是有一個bug就是添加了一些圖片之后再添加圖片的時候會把之前的圖片的id頂掉，使之前的圖片不出現，所以就讓img的Id通過獲取到allpic下面的所有img的個數再加上i的方法來使其id不和之前的id有沖突 img.setAttribute("src",imgurl);//這是動態的將img的src換成我們之前定義好的地址 } }else{ alert("只能上傳8張圖片！") } }
感覺上面的注釋已經說的夠明確了，下面是實現點擊那個叉號使其移除的效果，這個比較好實現，下面是js:
$("#allpic").on('click','a',function () {
$(this).parent().remove();
})
就是一個簡單的點擊事件使其移除。
照例，下面是全部的代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/iconfont.css" />
<title>仿淘寶中的評價曬單中選擇圖片可以預覽，添加，刪除</title>
<script type="text/javascript" src="js/jquery.1.8.2.min.js" ></script>
<style type="text/css">
*{margin: 0;padding: 0;}
.allpic{width: 500px;margin: 0 auto;height: auto;display: none;}
.square{width: 66px;margin:0 auto;margin-top:50px;height: 75px;border: 1px solid #eee;text-align: center;}
.square img{width: 40px;margin-top: 10px;}
input{display: none;}
</style>
</head>
<body>
<div class="choose">
<div id="allpic" style="width: 400px;height: auto;display: none;"></div>
<!--這是想要的樣式-->
<div class="square" onclick="show()">
<img id="photo" src="picture/camera.png"/>
<p>傳圖曬單</p>
</div>
<!--這是要被隱藏的input-->
<input type="file" multiple="multiple" name="file" id="file" accept="images/*" onchange="imgchange(this)"/>
</div>
<script type="text/javascript">
function show(){
document.getElementById("file").click();
}
function imgchange(obj){
var kk=document.getElementById("file").files.length;//獲取input中文件的長度
$("#allpic").css("display","block");//這是預覽的圖片放置的位置，在HTML中沒有點擊時是隱藏的，點擊選擇文件之后出現
var s=$("#allpic").find("img").length;//這是取得allpic中的img的個數
if(kk<=8){
for(var i=0;i<kk;i++){
$("#allpic").append("<span style='position: relative;'><img id='"+(s+i)+"' src='' style='width: 80px;height:80px;margin-right: 20px;margin-bottom: 10px'/><a style='position: absolute;right: 13px;top: -35px;width: 15px;height: 15px;line-height:13px;text-align:center;border-radius: 50%;background: #000;color: #fff;cursor: pointer;'>x</a></span>")
//在#allpic中插入span標簽來放置img圖片，這里圖片的id是動態的，因為不確定客戶會傳多少張圖片。所以img的id是從1到8排下來的，后面的a標簽是圖片上面的叉號按鈕，之后會實現點擊之后圖片消失的效果
var imgurl=window.URL.createObjectURL(file.files[i]);//給img創建一個隨機的url地址以便可以添加到需要展示的img的src中
var img=document.getElementById(s+i);//給img創建一個動態的id,剛開始寫的時候是用的i當做的img的id,但是有一個bug就是添加了一些圖片之后再添加圖片的時候會把之前的圖片的id頂掉，使之前的圖片不出現，所以就讓img的Id通過獲取到allpic下面的所有img的個數再加上i的方法來使其id不和之前的id有沖突
img.setAttribute("src",imgurl);//這是動態的將img的src換成我們之前定義好的地址
}
}else{
alert("只能上傳8張圖片！")
}
}
$("#allpic").on('click','a',function () {
$(this).parent().remove();
})
</script>
</body>
</html>
點擊之后的效果圖：
選擇了兩個文件之后的效果：
a標簽的位置你們自己可以調一下
再次添加圖片的效果：
把圖片移除之后的效果：
還可以再添加，我就不截圖了。但是呢現在還有一個問題就是當我移除最后一個圖片再添加圖片的時候是可以的，但是如果我移除的不是最后一個圖片，而是前面的圖片，就會出現這樣的bug
console了一下img,發現是id沖突了，我暫時還沒有想到解決的辦法，有哪位大佬卡看到了，可以給點指點