是否可以在本地將圖像加載到網頁中？

Question

這個想法是從用戶的機器拍攝圖像，並允許他們在網頁上顯示圖像。我不想將圖像發送回服務器。

上傳按鈕將存在。它應該只是動態更新頁面內容。

這可以用HTML5 localstorage或任何東西來完成嗎？

Answer 1

的FileReader能夠這樣做的。下面是示例代碼：

<input type="file" id="files" name="files[]" multiple /> 
<img id="image" /> 

<script> 
    function onLoad(evt) { 
     /* do sth with evt.target.result - it image in base64 format ("data:image/jpeg;base64,....") */ 
     localStorage.setItem('image', evt.target.result); 
     document.getElementById('image').src = evt.target.result; 
    }; 

    function handleFileUpload(evt) { 
     var files = evt.target.files; // FileList object 

     for (var i = 0; i < files.length; i++) { 
      var f = files[i]; 

      // Only process image files. 
      if (!f.type.match('image.*')) { 
       continue; 
      } 

      var reader = new FileReader(); 
      reader.onload = onLoad; 
      reader.readAsDataURL(f); 
     } 
    } 

    document.getElementById('files').addEventListener('change', handleFileUpload, false); 

    var image = localStorage.getItem('image'); 
    if (image !== null) { 
     document.getElementById('image').src = image; 
    } 
</script> 

Answer 2

絕對是的，只要你有一個尖端的瀏覽器（Chrome或Firefox）。您想使用FileReader和readAsDataURL()。看看第三個例子在本教程：

http://www.html5rocks.com/en/tutorials/file/dndfiles/