在页面上实时显示选择的图片文件

有一种需求是在使用file控件选择图片文件的时候要在页面相应的位置显示该图片并且根据选择的文件实时更新图片的src。一种思路是在图片上传的时候由file输入项获取文件在客户端的绝对路径，然后修改图片的src属性为该绝对路径即可。但是这种做法一般不可行，因为大多数浏览器并不支持直接由file.value得到在客户端的真实路径，而是会得到一个虚拟的路径，这样的路径并没有用。当然，js里一个内置的对象提供了这样的解决方法：

使用FileReader对象即可实现在file输入项改变的时候读取file上传的图片文件到指定的src中，示例如下：

页面中的图片和文件输入项：

<img src="" id="img-id"/>

<input type="file" name="file" id="file-id" οnchange="readFile()"/>

js获取文件到图片上显示的代码：

function readFile(){

     //得到文件对象

     var imgFile=document.getElementById('file-id').files[0];

     //创建filereader对象

     var fileReader = new FileReader();

     //设置回调函数，即获取到文件路径后的操作

     fileReader.onload{

          document.getElementById('img-id').src=fileReader.result;

     }

     //读取文件

     fileReader.readAsDataURL(imgFile);

}