javascript上传图片本地预览实例代码

有时候上传图片的时候，希望能够在本地预览一下，因为这样比较直观，下面就是一段这样的代码实例，希望能够帮助到需要的朋友，代码实例如下:

[ 其他 ] 运行代码下载代码

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>上传图片本地预览-51前端</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>

代码描述：javascript 上传图片本地预览。javascript上传图片本地预览实例代码

下载全部收藏

140 187

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册