업로드하기 전에 이미지 미리보기를 표시하십시오.

Question

이 스크립트를 테스트하는데 여기를 참조하십시오. 하지만 이미지를 선택하면 코드가 표시되지 않으므로 작업 할 수 없습니다.

<script> 
jQuery(document).ready(function(e){ 
    jQuery('#file_input').change(function(e) { 
     //alert("okokok"); 
     /**/ 
     readFile(this.files[0], function(e) { 
      //manipulate with result... 
      jQuery('#output_field').text(e.target.result); 
     }); 
    }); 
}); 

function readFile(file, callback){ 
    var reader = new FileReader(); 
    reader.onload = callback 
    reader.readAsText(file); 
} 
</script> 

HTML 코드 :

> <input type="file" id="file_input" class="foo" /> <div > id="output_field" class="foo"></div> 

때 선택 나는 단지 인코딩 단어와 숫자를 표시 할 파일이 아닌 이미지. 어떻게 또는 왜 이런 일이 일어나는 지 모르겠습니다. 그렇지 않으면 당신은 img 요소로 변경해야

jQuery(document).ready(function(e){ 

    jQuery('#file_input').change(function(e) { 

     //alert("okokok"); 



     /**/ 
     readFile(this.files[0], function(e) 
     { 
      //manipulate with result... 
      jQuery('#output_field').src(e.target.result); 
     }); 




     }); 




}); 

function readFile(file, callback){ 
    var reader = new FileReader(); 
    reader.onload = callback 
    reader.readAsDataURL(file); 

} 

이 #output_field 이미지라고 가정 :

Answer 1

이 코드를 사용해보십시오. 이 문서는 도움이 될 수 있습니다 : http://www.javascripture.com/FileReader