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

显示图像预览直到上传

1 个答案: