上傳圖片本地預覽例項程式碼

antzone發表於2017-03-10

有時候上傳圖片的時候，希望能夠在本地預覽一下，因為這樣比較直觀，下面就是一段這樣的程式碼例項，希望能夠幫助到需要的朋友，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>上傳圖片本地預覽-螞蟻部落</title>
<style type="text/css">
#imgPre{
  display:block;
}
</style>
<script type="text/javascript"> 
function getFileUrl(sourceId) { 
  var url; 
  if(navigator.userAgent.indexOf("MSIE")>=1) {
    url=document.getElementById(sourceId).value; 
  } 
  else if(navigator.userAgent.indexOf("Firefox")>0) {
    url=window.URL.createObjectURL(document.getElementById(sourceId).files.item(0)); 
  } 
  else if(navigator.userAgent.indexOf("Chrome")>0) {
    url=window.URL.createObjectURL(document.getElementById(sourceId).files.item(0)); 
  } 
  return url; 
} 
function preImg(sourceId, targetId) { 
  var url=getFileUrl(sourceId); 
  var imgPre=document.getElementById(targetId); 
  imgPre.src=url; 
} 
window.onload=function(){
  var imgOne=document.getElementById("imgOne");
  imgOne.onchange=function(){
    preImg(this.id,'imgPre');
  }
}
</script> 
</head> 
<body> 
<form action=""> 
  <input type="file" name="imgOne" id="imgOne" /> 
  <img id="imgPre" src=""/> 
</form> 
</body> 
</html>

相關文章