檔案上傳本地預覽js程式碼例項

antzone發表於2017-03-22
JS

使用<input type="file"/>上傳圖片的時候，如果能夠在本地預覽圖片效果，那算是比較人性化的舉措，下面就是一個程式碼例項，能夠實現本地上傳圖片本地預覽效果，希望能夠對需要的朋友帶來一定的幫助。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</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>

以上程式碼實現了我們的要求，能夠實現本地預覽上傳圖片效果。

相關文章