HTML5之FileReader的使用(转)

HTML5之FileReader的使用

http://blog.csdn.net/jackfrued/article/details/8967667

MDN : 代码

<!doctype html>
<html>

<head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
    <title>Image preview example</title>
    <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;

        oFReader.onload = function (oFREvent) {
            debugger
            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; }
            debugger
            oFReader.readAsDataURL(oFile);
            // 该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。
        }

    </script>
</head>

<body onload="loadImageFile();">
    <form name="uploadForm">
        <table>
            <tbody>
                <tr>
                    <td>
                        <img id="uploadPreview" style="width: 100px; height: 100px;" src=""
                            alt="Image preview" />
                    </td>
                    <td>
                        <input id="uploadImage" type="file" name="myPhoto" onchange="loadImageFile();" />
                    </td>
                </tr>
            </tbody>
        </table>

        <p>
            <input type="submit" value="Send" />
        </p>
    </form>
</body>

</html>

MDN 详解

https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
posted @ 2017-12-24 22:34  mysure  阅读(493)  评论(0)  编辑  收藏  举报