方法：
添加圖片使用了<input>標(biāo)簽，將標(biāo)簽的type設(shè)置為file就可以點(diǎn)擊打開(kāi)文件夾添加文件了。

<input id="atlas_photo" type="file">

當(dāng)前在頁(yè)面表現(xiàn)為一個(gè)輸入欄

image

如果不想要輸入欄可以將其隱藏：將其display設(shè)置為none，并使用圖片元素代替點(diǎn)擊。相當(dāng)于給點(diǎn)擊選擇文件換一種展現(xiàn)形式。

display:none;

添加一個(gè)圖片表示點(diǎn)擊該圖片添加文件，然后給圖片元素添加點(diǎn)擊事件：點(diǎn)擊觸發(fā)input的點(diǎn)擊事件：

<img id="atlas-img" class="atlas" src="img/add.png" onclick="openFile()">

openFile()函數(shù)用于觸發(fā)input的點(diǎn)擊：

function openFile() {
    document.getElementById(atlas_photo).click();
}

也就是說(shuō)，點(diǎn)擊圖片是為了點(diǎn)擊輸入框，點(diǎn)擊圖片導(dǎo)致了輸入框的點(diǎn)擊。

現(xiàn)在就完成了點(diǎn)擊圖片選擇文件這一步了。接下來(lái)是將選擇的文件顯示出來(lái)，達(dá)成圖片的預(yù)覽效果。

這里使用jQuery中的prop()方法獲取輸入框中的數(shù)據(jù)值，然后使用FileReader()將圖片信息讀取為URL

prop() 方法設(shè)置或返回被選元素的屬性和值。

FileReader()的readASDataURL()將文件讀取為一段以data:開(kāi)頭的字符串，這段字符串的實(shí)質(zhì)就是 Data URL，Data URL是一種將小文件直接嵌入文檔的方案。這里就將圖片轉(zhuǎn)化成了base64格式。

*FileReader()方法參考：https://www.cnblogs.com/LO-gin/p/6817319.html

然后用輸入框獲取到的圖片的base64代替當(dāng)前圖片的地址。

function viewImage() {
    var file = $("#atlas_photo").prop('files')[0];
    if (file) {
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onloadend = function (even) {
            $('#atlas-img').attr("src", even.currentTarget.result);
        }
    }
}

這樣就實(shí)現(xiàn)了圖片的預(yù)覽。

注意：當(dāng)點(diǎn)擊輸入框但不選擇任何文件時(shí)輸入框內(nèi)的內(nèi)容將為空，但是預(yù)覽的圖片因?yàn)闆](méi)有改變地址因此仍顯示之前的圖片，給人一種沒(méi)有更換信息的錯(cuò)覺(jué)，如果沒(méi)有將之前的文件信息保存的話(huà)在上傳時(shí)就會(huì)出現(xiàn)錯(cuò)誤。為了避免這個(gè)情況，可以使用中間變量保存之前的文件信息，如果當(dāng)前操作沒(méi)有選擇任何文件的話(huà)就將之前的信息進(jìn)行上傳。

完成代碼：

HTML

<div id="atlasBox">
　　<img id="atlas-img" class="atlas" src="img/add.png" onclick="openFile('atlas_photo')">
　　<input id="atlas_photo" type="file" onchange="viewImage('atlas-img')">
</div>

JavaScript

var photoId;
function openFile(e) {
    photoId=e;
    document.getElementById(photoId).click();
}
function viewImage(e) {
    var file = $("#"+photoId).prop('files')[0];
    if (file) {
        // image = file; //用于確定信息時(shí)確保是否已上傳圖片
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onloadend = function (even) {
            $('#'+e).attr("src", even.currentTarget.result);
            addBox(e);
        }
    }
}

這里調(diào)用點(diǎn)擊等方法時(shí)添加了參數(shù)，用于傳遞id。因?yàn)轫?xiàng)目中還有其他文件選擇欄，為了復(fù)用方法，就添加了參數(shù)。不需要的也可以不傳參。

CSS

#atlas_photo{
    display: none;
}
.atlas{
    width:130px; 
    height:130px;
    border: 1px solid gray;
    margin: 0 5px;
}

添加圖片后追加默認(rèn)輸入框

以上步驟實(shí)現(xiàn)了圖片的上傳和預(yù)覽，為了和效果圖中一樣，在添加圖片后追加一個(gè)繼續(xù)添加圖片的“加號(hào)”。

只要在輸入框狀態(tài)發(fā)生改變時(shí)添加元素即可，同時(shí)轉(zhuǎn)移圖片id，使得圖片排列預(yù)覽。

JS

function addBox(e){
   if(e=='atlas-img'){
       var openVar='"atlas_photo"';
       $('#atlas-img').attr("id","");
       $('#atlasBox').append("<img id='atlas-img' class='atlas' src='img/add.png' onclick='openFile("+openVar+")'>");
   }
}