Js FileReader图片加载

最新推荐文章于 2024-11-30 22:48:19 发布

weixin_30411239

最新推荐文章于 2024-11-30 22:48:19 发布

阅读量174

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xinyibufang/p/7723301.html

本文介绍了FileReader对象的主要用途和方法，包括如何终止文件读取操作、异步读取文件内容等，并提供了具体的JavaScript示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

FileReader

FileReader主要用于将文件内容读入内存，通过一系列异步接口，可以在主线程中访问本地文件。

方法

方法定义	描述
abort():void	终止文件读取操作
readAsArrayBuffer(file):void	异步按字节读取文件内容，结果用ArrayBuffer对象表示
readAsBinaryString(file):void	异步按字节读取文件内容，结果为文件的二进制串
readAsDataURL(file):void	异步读取文件内容，结果用data:url的字符串形式表示
readAsText(file,encoding):void	异步按字符读取文件内容，结果用字符串形式表示

事件

事件名称	描述
onabort	当读取操作被中止时调用
onerror	当读取操作发生错误时调用
onload	当读取操作成功完成时调用
onloadend	当读取操作完成时调用,不管是成功还是失败
onloadstart	当读取操作将要开始之前调用
onprogress	在读取数据过程中周期性调用

读取方式(以读取图片为例)

readAsDataURL

readAsText

readAsBinaryString

readAsArrayBuffer

例子

Html

　　　　　　　　　　　　　　　　　　　　　　　　 <div class="row">
                                            <div class="col-md-2" style="padding:0;">
                                                <a href="#" class="thumbnail" style="text-align:center;">
                                                    <img id="testimg" src="~/Content/kittens.jpg" />
                                                    <span >asdasdas</span>
                                                </a>
                                            </div>
                                            
                                            <div class="col-md-2" style="padding:0;">
                                                <input type="file" id="SelectFile" />
                                            </div>
                                        </div>

JavaScript

    $("#SelectFile").bind("change", function () {
        var file = document.getElementById('SelectFile').files[0];　　　　//选择的文件对象
        if (file) {
            var reader = new FileReader();　　　　//实例化
            reader.readAsDataURL(file);　　　　　　//加载
            reader.onload = function () {
                var re = this.result;
                alert(file.name);    //'文件'file.name  '大小'file.size  '修改'file.lastModifiedDate     
                $("#testimg").attr("src", re);　　//赋值img
            }
        }
    })