是否可以在本地将图像加载到网页中？

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/