이미지를 로컬에서 웹 페이지로로드 할 수 있습니까?

Question

아이디어는 사용자의 컴퓨터에서 이미지를 가져 와서 이미지를 웹 페이지에 표시 할 수있게하는 것입니다. 이미지를 다시 서버로 보내지 않습니다.

업로드 버튼이 있습니다. 그것은 단지 페이지 내용을 동적으로 업데이트해야합니다.

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/