アップロードするまで画像のプレビューを表示

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