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

}) ;

猜你喜欢

转载自www.cnblogs.com/ourLifes/p/9724133.html