イメージをローカルにWebページに読み込むことは可能ですか？

Question

アイデアは、ユーザーのマシンからイメージを取得し、イメージをWebページに表示できるようにすることです。私はイメージをサーバーに送り返したくない。

アップロードボタンが存在します。ページコンテンツを動的に更新するだけです。

これはHTML5ローカルストレージなどで行うことができますか？

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/