为什么要使用FileReader?
可是在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[0];
var reader = new FileReader();
reader.onload = function(){
$("img").attr("src",reader.result);
};
reader.readAsDataURL(file);
};
$("input").change(changefun);
</script>