相容所有瀏覽器的圖片上傳本地預覽效果

antzone發表於2017-03-21
瀏覽器

在實際應用中，可能需要上傳圖片，這也是常見的操作，在上傳的時候，如果能夠在本地預覽圖片的那就更為人性化了，下面就通過程式碼例項介紹一下如何實現此功能，希望能夠給需要的朋友帶來一定的幫助。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<script type="text/javascript">  
function preview(file){
  var prevDiv = document.getElementById('preview');
  if(file.files && file.files[0]){
    var reader = new FileReader();
    reader.onload = function(evt){
      prevDiv.innerHTML='<img src="' + evt.target.result + '" />';
    }  
    reader.readAsDataURL(file.files[0]);
  }
  else{
   prevDiv.innerHTML='<div  style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\''   +file.value + '\'"></div>';
  }
}
window.onload=function(){
  var ofile=document.getElementById("file");
  ofile.onchange=function(){
    preview(this)
  }
}
</script>
</head>
<body>
<div id="preview"></div>
<input type="file" id="file" />
</body>
</html>


相關文章