URL.createObjectURL() 實現本地上傳圖片 並預覽功能

URL.createObjectURL() 靜態方法會創建一個 DOMString，其中包含一個表示參數中給出的對象的URL。這個 URL 的生命周期和創建它的窗口中的 document 綁定。這個新的URL 對象表示指定的 File 對象或 Blob 對象。

mdn傳送門：https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL

 

 

<input class="avatarCon" type="file" />

<div class="showImg">
　　<img src="" alt="" />
</div>

function getObjectURL(file) {
　　var url = null;
　　if (window.createObjectURL != undefined) {
　　　　url = window.createObjectURL(file);
　　} else if (window.URL != undefined) {
　　　　url = window.URL.createObjectURL(file);
　　} else if (window.webkitURL != undefined) {
　　　　url = window.webkitURL.createObjectURL(file);
　　}
　　return url;
}

 

var avatarInput = $('.avatarCon');
avatarInput.change(function(event) {

　　var myPic = $(this).get(0).files[0];

　　$('.showImg img').attr('src',getObjectURL(myPic));
});