javascript - 显示图像预览直至上传

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>

当选择我想要的文件时，只显示编码文字和数字，不显示图像。我不知道这是如何或为什么会发生？

Answer 1

试试这个代码:

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是一个图像，否则您应该将其更改为img元素。这篇文章可能会有所帮助:http://www.javascripture.com/FileReader