JavaScript html5利用FileReader实现上传功能

2023年5月27日上午8:04 • JavaScript

这里提供一个简单的JavaScript HTML5利用FileReader实现上传文件的攻略。

前言

很多时候我们需要上传文件到服务器。HTML5中提供了<input type="file">标签来实现文件上传。但是这种方法有一个限制：无法对文件进行预览或处理。为了解决这个问题，我们可以使用FileReader API。FileReader API是HTML5中提供的一个用来读取文件的API，可以将文件读取为文本、二进制数据和DataURL形式。

FileReader API

FileReader API包含以下几种方法：

readAsBinaryString(blob: Blob): 将二进制数据读取为字符串
readAsText(blob: Blob, encoding?: string): 将文本文件读取为字符串
readAsDataURL(blob: Blob): 将文件读取为DataURL格式
abort(): 取消读取操作

代码示例

下面是一个简单的HTML文件上传的示例：

<!DOCTYPE html>
<html>
<head>
    <title>FileReader API Example</title>
</head>
<body>
    <input type="file" id="file-input">
    <div id="preview"></div>

    <script>
        const fileInput = document.getElementById("file-input");
        const preview = document.getElementById("preview");

        fileInput.addEventListener('change', function(e) {
            const file = e.target.files[0];

            const reader = new FileReader();
            reader.onload = function(e) {
                const text = e.target.result;
                preview.innerHTML = text;
            };
            reader.readAsText(file);
        });
    </script>
</body>
</html>

在这个例子中，我们创建了一个文件上传的表单和一个用来显示文件内容的区域。当用户选择文件后，FileReader API会将文件内容读取为文本文件并显示到页面上。

另外一个例子是将文件读取为DataURL格式：

<!DOCTYPE html>
<html>
<head>
    <title>FileReader API Example</title>
</head>
<body>
    <input type="file" id="file-input">
    <img id="image-preview">

    <script>
        const fileInput = document.getElementById("file-input");
        const imagePreview = document.getElementById("image-preview");

        fileInput.addEventListener('change', function(e) {
            const file = e.target.files[0];

            const reader = new FileReader();
            reader.onload = function(e) {
                const dataURL = e.target.result;
                imagePreview.src = dataURL;
            };
            reader.readAsDataURL(file);
        });
    </script>
</body>
</html>

在这个例子中，我们创建了一个文件上传的表单和一个用来显示图片的<img>标签。当用户选择文件后，FileReader API会将文件内容读取为DataURL格式并设置为<img>标签的src属性。

注意：由于安全限制，使用FileReader API读取本地文件需要在服务器上运行，不能直接在本地环境下运行。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript html5利用FileReader实现上传功能 - Python技术站