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

}) ;