上傳前預覽圖像？

Question

在上傳到服務器之前，有沒有辦法在html頁面上預覽圖片？

我需要顯示我仍然需要上傳的圖像的預覽，只是爲了表明有更改。我可能需要更改圖像源。有沒有我可以使用的現有技術/方法？

Answer 1

最近我解決了這個問題是這樣的：

我綁定一個ChangeListener的FileInput

<input type="file" name="photofile" id="photofile"> 



$('#photofile').bind("change", function(){ 
      readUrl(this); 
     }); 

，並在readURL功能設置圖像到像這樣的先前空的img元素：

readUrl = function(input) { 
     //if File is there 
     if(input.files && input.files[0]) { 
      //create a Filereader 
      var reader = new FileReader(); 
      //bind a function to the reader which will be executed when file is completely loaded 
      reader.onload = function(e) { 
       //Here you render your preview image 
       $("#bild-vorschau").attr("src", e.target.result); 
      } 

      reader.readAsDataURL(input.files[0]); 
     } 
    } 

在這裏，你可以看到它在一個Working Fiddle

Answer 2

看看這篇文章Ajax Upload with Progress Bar並嘗試你想在你的問題上達到的演示。 DEMO

這可能是FileReader這是在現代瀏覽器上工作。

Answer 3

它可以使用The HTML5 FileReader API

僅使用JavaScript和的FileReader對象來實現，我們可以允許用戶將圖像加載到一個應用程序。

HTML代碼：

<input type="file" id="getimage"> 
    <fieldset> 
     <legend>Your image here</legend> 
      <div id="imgstore"></div> 
    </fieldset> 

JavaScript代碼：

<script> 
function imageHandler(e2) 
{ 
    var store = document.getElementById('imgstore'); 
    store.innerHTML='<img src="' + e2.target.result +'">'; 
} 

function loadimage(e1) 
{ 
    var filename = e1.target.files[0]; 
    var fr = new FileReader(); 
    fr.onload = imageHandler; 
    fr.readAsDataURL(filename); 
} 

window.onload=function() 
{ 
    var x = document.getElementById("filebrowsed"); 
    x.addEventListener('change', readfile, false); 
    var y = document.getElementById("getimage"); 
    y.addEventListener('change', loadimage, false); 
} 
</script> 

如何檢查是否瀏覽器支持HTML5文件API：

// Checking all the possible window objects needed for file api 
if (window.File && window.FileReader && window.FileList && window.Blob) { 
    // Browser is fully supportive. 
} else { 
    // Browser not supported. Try normal file upload 
} 

有用的參考以下鏈接：

Demo Here

Complete Example Here

Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers