js文件上传本地预览代码实例

使用上传图片的时候，如果能够在本地预览图片效果，那算是比较人性化的举措，下面就是一个代码实例，能够实现本地上传图片本地预览效果，希望能够对需要的朋友带来一定的帮助。

代码如下:

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

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.51qianduan.com/" />
<title>51前端</title>
<script type="text/javascript"> 
function setImagePreview(fieldupload, image, imagediv){ 
  var docObj = document.getElementById(fieldupload); 
  var imgObjPreview = document.getElementById(image); 
  if(docObj.files && docObj.files[0]){ 
    //火狐下，直接设img属性 
    imgObjPreview.style.display = 'block'; 
    imgObjPreview.style.width = '150px'; 
    imgObjPreview.style.height = '150px'; 
    //imgObjPreview.src = docObj.files[0].getAsDataURL(); 
    //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式 
    imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]); 
  } 
  else { 
    //IE下，使用滤镜 
    docObj.select(); 
    var imgSrc = document.selection.createRange().text; 
    var localImagId = document.getElementById(imagediv); 
    //必须设置初始大小 
    localImagId.style.width = "150px"; 
    localImagId.style.height = "150px"; 
    //图片异常的捕捉，防止用户修改后缀来伪造图片 
    try { 
      localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"; 
      localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc; 
    } 
    catch (e) { 
      alert("您上传的图片格式不正确，请重新选择!"); 
      return false; 
    } 
    imgObjPreview.style.display = 'none'; 
    document.selection.empty(); 
  } 
  return true; 
} 
window.onload=function(){
  var upload=document.getElementById("upload");
  upload.onchange=function(){
    setImagePreview('upload','preview','localImag');
  }
}
</script> 
</head> 
  
<body> 
<div id="localImag"><img id="preview" width="150px" height="150px" src="mytest/demo/soft.gif"/></div> 
<div><input type="file" id="upload" /></div> 
</body> 
</html>

代码描述：js文件本地预览。js文件上传本地预览代码实例

下载全部收藏

108 144

用户评论

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