您现在的位置是：首页 > 技术学习 > javascript 网站首页 技术学习 javascript

当我们使用file类型的按钮上传图片的时候，有时候希望图片能显示在页面里，那么如何显示呢？

使用file的onchange事件可以监听到上传按钮是否发生了上传。如果这时候获取它的value值，在部分浏览器上是可以获取到图片路径的。但是一些浏览器出于安全考虑，获取到的路径会全部变成"C:\fakepath\ + 文件名"的形式。而我们使用该路径去显示图片是无法显示的。

H5中有FileReader,用于读取文件。我们可以在file按钮onchange的时候，去读取上传文件的信息。从而获取上传图片的dataURL格式的数据(通过data协议显示图片 data:image/图片格式;base64,….)

FileReader使用方法

1. 创建

new FileReader()

<script type="text/javascript">
    var fr = new FileReader();  
    // 可使用window.FileReader是否为真来判断当前浏览器是否支持FileReader。
    // if(window.FileReader) {
        // var fr = new FileReader();  
    // }
</script>

2. 事件

1. onabort 当读取操作被中止时调用
2. onerror 当读取操作发生错误时调用
3. onload 当读取操作成功完成时调用
4. onloadend 当读取操作完成时调用,不管是成功还是失败.该处理程序在onload或者onerror之后调用
5. onloadstart 当读取操作将要开始之前调用
6. onprogress 在读取数据过程中周期性调用

例：

fr.onload = function(){
    this.result; 
    // 文件一旦开始读取，实例的 result 属性都会被填充。
    // 如果读取失败，则 result 的值为 null ，成功则result值为读取的结果。
};

3. 状态常量

常量名     值      描述
——————————————————————————————————
EMPTY     0    还没有加载任何数据
LOADING   1    数据正在被加载
DONE      2    已完成全部的读取请求

4. 属性

1. error 在读取文件时发生的错误。只读。
2. readyState 表明FileReader对象的当前状态. 值为状态常量中的一个。只读。
3. result 读取到的文件内容。这个属性只在读取操作完成之后才有效,并且数据的格式取决于读取操作是由哪个方法发起的。只读。

5. 方法

1. abort()
   中止该读取操作.在返回时,readyState属性的值为DONE。当没在进行读取操作时(也就是readyState属性的值不为LOADING时),调用abort()方法会抛出该异常.
2. readAsArrayBuffer(指定的对象)
   开始读取指定对象中的内容。读取的结果result属性中将包含一个ArrayBuffer对象，以表示所读取文件的内容。当读取操作完成时,readyState属性的值会成为DONE。
3. readAsBinaryString(指定的对象)
   开始读取指定对象中的内容。当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之。同时,result属性中将包含所读取文件的原始二进制数据。
4. readAsDataURL(指定的对象)
   开始读取指定对象中的内容。当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之。同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容。
5. readAsText(指定的对象,编码形式)
   第二个参数为可选参数，一个字符串,指定编码形式，默认'utf-8'
   开始读取指定对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之。同时,result属性中将包含一个字符串以表示所读取的文件内容.

file按钮

获取文件的详细信息：

<input id="btn" type="file" />
<script type="text/javascript">
    var fileBtn = document.getElementById('btn');
    // 获取上传文件信息
    fileBtn.onchange = function () {
        var file = this.files[0];
        // files代表上传的文件(可上传多个文件)，files[0],代表取上传文件的第一个。
        // file是一个对象: 
        // 显示上传文件的相关信息，有name文件名、size文件大小、type文件类型、最近上传时间等属性
        console.log(file); 
        if(file.type.indexOf('image') == -1) {
            alert('上传文件非图片');
        }; // 上传文件的type属性，可以用来过滤上传文件     
</script>

案例：

<input id="btn" type="file" />
<img id="showimg" src="" />
<script type="text/javascript">
    var showimg = document.getElementById('showimg');
    var fileBtn = document.getElementById('btn');
    // 获取上传文件信息
    fileBtn.onchange = function () {
        var file = this.files[0]; 
        if(window.FileReader) {
            var fr = new FileReader();
            fr.readAsDataURL(file);
            fr.onload = function(e) {
                console.log(e.target); 
                // e.target返回FileReader对象,里面包含：事件，状态，属性，结果等
                console.log(this); // 同e.target返回结果一样,两者等价
                console.log(e.target.result); // 读取的结果，dataURL格式的
                showimg.src = this.result; // 图片可显示出来
            };
        } else {
            alert('暂不支持FileReader');
        };
    };
</script>

个人CSDN