jQuery實現圖片添加及預覽

效果如下：

方法：

添加圖片使用了<input>標簽，將標簽的type設置為file就可以點擊打開文件夾添加文件了。

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

當前在頁面表現為一個輸入欄

如果不想要輸入欄可以將其隱藏：將其display設置為none，並使用圖片元素代替點擊。相當於給點擊選擇文件換一種展現形式。

display:none;

 添加一個圖片表示點擊該圖片添加文件，然后給圖片元素添加點擊事件：點擊觸發input的點擊事件：

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

openFile()函數用於觸發input的點擊：

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

也就是說，點擊圖片是為了點擊輸入框，點擊圖片導致了輸入框的點擊。

現在就完成了點擊圖片選擇文件這一步了。接下來是將選擇的文件顯示出來，達成圖片的預覽效果。

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

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

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

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

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

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);
        }
    }
}

這樣就實現了圖片的預覽。

 

注意：當點擊輸入框但不選擇任何文件時輸入框內的內容將為空，但是預覽的圖片因為沒有改變地址因此仍顯示之前的圖片，給人一種沒有更換信息的錯覺，如果沒有將之前的文件信息保存的話在上傳時就會出現錯誤。為了避免這個情況，可以使用中間變量保存之前的文件信息，如果當前操作沒有選擇任何文件的話就將之前的信息進行上傳。

 

完成代碼：

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; //用於確定信息時確保是否已上傳圖片
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onloadend = function (even) {
            $('#'+e).attr("src", even.currentTarget.result);
            addBox(e);
        }
    }
}

這里調用點擊等方法時添加了參數，用於傳遞id。因為項目中還有其他文件選擇欄，為了復用方法，就添加了參數。不需要的也可以不傳參。

CSS

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

 

添加圖片后追加默認輸入框

以上步驟實現了圖片的上傳和預覽，為了和效果圖中一樣，在添加圖片后追加一個繼續添加圖片的“加號”。

只要在輸入框狀態發生改變時添加元素即可，同時轉移圖片id，使得圖片排列預覽。

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+")'>");
    }
}