一个使用FileReader的案例

最新推荐文章于 2024-07-26 08:29:23 发布

jahentao

最新推荐文章于 2024-07-26 08:29:23 发布

阅读量2.1k

点赞数 1

文章标签： web应用数据上传文件

本文链接：https://blog.csdn.net/u011730792/article/details/53140641

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

参考

说明

使用FileReader对象,web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容,可以使用File对象或者Blob对象来指定所要处理的文件或数据.

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

IE10以下的版本不支持FileReader()构造函数.不过可以利用滤镜来兼容旧版本的IE: 兼容IE的图片本地预览.

事件处理程序

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

状态常量

EMPTY   0   还没有加载任何数据.
LOADING 1   数据正在被加载.
DONE    2   已完成全部的读取请求.

例子

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <script type="text/javascript">
            oFReader = new FileReader(),
            // 图片格式过滤
            rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
            // 文件读取后，状态常量会标记为DONE=2 ，此时文件加载完毕，触发事件
            oFReader.onload = function(oFREvent) {
                console.log('read complete');
                console.log(oFREvent);
                document.getElementById("uploadPreview").src = oFREvent.target.result;
            };
            // 加载图像文件
            function loadImageFile() {
                // 判断上传的文件队列长度
                if(document.getElementById("uploadImage").files.length === 0) {
                    return;
                }
                // 每次只能上传单个文件
                var oFile = document.getElementById("uploadImage").files[0];
                // 用过滤器检验文件类型
                if(!rFilter.test(oFile.type)) {
                    alert("You must select a valid image file!");
                    return;
                }
                // 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.
                // URL格式的字符串以表示所读取文件的内容.
                oFReader.readAsDataURL(oFile);
            }
        </script>
    </head>

    <body>
        <form name="uploadForm" action="">
            <table>
                <tbody>
                    <tr>
                        <td>
                            <img id="uploadPreview" style="width: 100px; height: 100px;" src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%3F%3E%0A%3Csvg%20width%3D%22153%22%20height%3D%22153%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%20%3Cg%3E%0A%20%20%3Ctitle%3ENo%20image%3C/title%3E%0A%20%20%3Crect%20id%3D%22externRect%22%20height%3D%22150%22%20width%3D%22150%22%20y%3D%221.5%22%20x%3D%221.500024%22%20stroke-width%3D%223%22%20stroke%3D%22%23666666%22%20fill%3D%22%23e1e1e1%22/%3E%0A%20%20%3Ctext%20transform%3D%22matrix%286.66667%2C%200%2C%200%2C%206.66667%2C%20-960.5%2C%20-1099.33%29%22%20xml%3Aspace%3D%22preserve%22%20text-anchor%3D%22middle%22%20font-family%3D%22Fantasy%22%20font-size%3D%2214%22%20id%3D%22questionMark%22%20y%3D%22181.249569%22%20x%3D%22155.549819%22%20stroke-width%3D%220%22%20stroke%3D%22%23666666%22%20fill%3D%22%23000000%22%3E%3F%3C/text%3E%0A%20%3C/g%3E%0A%3C/svg%3E" alt="Image preview" />
                        </td>
                        <td>
                            <input id="uploadImage" type="file" name="myPhoto" onchange="loadImageFile();" />
                        </td>
                    </tr>
                </tbody>
            </table>
            <p>
                <!--form 内的submit 用于提交表单-->
                <input type="submit" value="Send" />
            </p>
        </form>
    </body>

</html>