FileReader实现上传图片时的图片预览

为什么要使用FileReader？

在html静态文件中，当我们在input文件选择框中选择一个文件时，该input框的值为文件的绝对路径，这个时候我们可以直接将该路径复制给我们需要预览的图片的src即可

可是在jsp这些服务器的脚本文件中，我们打开一个文件时，会发现文件选择框的值不是文件的绝对路径，而是c://fackpath之类的路径，这是服务器的临时文件存放路径，因此，我们直接将该路径复制给src是不可以的，这时候，就需要使用HTML5的新增对象FileReader来实现该功能了

FileReader简单介绍

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

其中File对象可以是来自用户在一个元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果.

通常我们使用filereader的构造方法创建一个filereader对象，然后使用readAsDataURL(file)等方法来读取指定的文件，在实现图片预览时，我们需要使用readAsDataURL()方法来读取img文件；当读取了之后，其读取的结果会自动保存在filereaer的result属性中；通常我们在filereader对象的onload事件中对result属性进行操作，因为我们需要在文件读取完毕时才进行相应的操作；filereader.src的值可以直接赋值给img.src属性值中

FileReader实现图片预览

<input type="file" name="file" />
<img src="" />

<script src="js/jquery.min.js"></script>
<script>
    var changefun = function(){
        var file = $(this).files[];
        var reader = new FileReader();
        reader.onload = function(){
            $("img").attr("src",reader.result);
        };
        reader.readAsDataURL(file);
    };
    $("input").change(changefun);
</script>