jquery html5 file 上傳圖片顯示圖片（上傳圖片預覽）

 

// html代碼

<input type="file" name="path[]" id="file0"  />

<img class="coverPicture" src="" id="img0" style="height:150px; width:250px;  display: none">

 

//建立一個可存取到該file的url

// jquery js 的代碼：不同瀏覽器下的路徑

function getObjectURL(file) {

var url = null ;

if (window.createObjectURL!=undefined) { // basic

url = window.createObjectURL(file) ;

} else if (window.URL!=undefined) { // mozilla(firefox)

url = window.URL.createObjectURL(file) ;

} else if (window.webkitURL!=undefined) { // webkit or chrome

url = window.webkitURL.createObjectURL(file) ;

}

return url ;

}

 

//顯示圖像 預覽效果

$("#file0").change(function(){
　　var objUrl = getObjectURL(this.files[0]) ;
　　console.log("objUrl = "+objUrl) ;
if (objUrl) {
　　$("#img0").attr("src", objUrl) ;
　　$("#img0").show() ;
}

}) ;