TechOverflow Logo
TechOverflow

如何使用 HTML5 FileReader 在 Javascript 中加载本地文件

English Deutsch 简体中文

在 HTML5 中，你不仅可以将文件上传到服务器，还可以使用 Javascript 直接在浏览器中处理它。

这篇文章提供了如何使用 FileReader 执行此操作的最小示例。

如何读取文本文件

example_read_text.html
<html>
<body>
    <input type="file" id="myfile" onchange="onMyfileChange(this)" />
    <script type="text/javascript">
        function onMyfileChange(fileInput) {
            if(fileInput.files[0] == undefined) {
                return ;
            }

            // 你可以读取的信息示例
            // var filename = fileInput.files[0].name;
            // var filesize = fileInput.files[0].size;
            var reader = new FileReader();
            reader.onload = function(ev) {
                var content = ev.target.result; // content 是一个字符串
                console.log("成功读取文件");
            };
            reader.onerror = function(err) {
                console.error("读取文件失败", err);
            }
            reader.readAsText(fileInput.files[0]);
        }
    </script>
</body>
</html>

如何将二进制文件读取为 ArrayBuffer

example_read_arraybuffer.html
<html>
<body>
    <input type="file" id="myfile" onchange="onMyfileChange(this)" />
    <script type="text/javascript">
        function onMyfileChange(fileInput) {
            if(fileInput.files[0] == undefined) {
                return ;
            }

            // 你可以读取的信息示例
            // var filename = fileInput.files[0].name;
            // var filesize = fileInput.files[0].size;
            var reader = new FileReader();
            reader.onload = function(ev) {
                var content = ev.target.result; // content 是一个 ArrayBuffer 对象
                console.log("成功读取文件");
            };
            reader.onerror = function(err) {
                console.error("读取文件失败", err);
            }
            reader.readAsArrayBuffer(fileInput.files[0]);
        }
    </script>
</body>
</html>
Check out similar posts by category: HTML, Javascript