HTML5 FileReader API

最新推荐文章于 2024-03-11 15:00:43 发布

转载最新推荐文章于 2024-03-11 15:00:43 发布 · 92 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/litefeather/p/6766870.html

本文详细介绍了HTML5中FileReader API的各种方法，包括读取文本文件、数据URL、二进制字符串及数组缓冲区等，并提供了一个读取并显示图片文件的示例。

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

FileReader Interface

Creating a new instance of FileReader:

var reader = new FileReader();

FileReader methods:

readAsText()

This method is used to read text file. It has two parameters, the first is for File or Blob object, the second is used to specify the encoding of file.

var reader = new FileReader();

reader.onload = function(e) {
  var text = reader.result;
}

reader.readAsText(file, encoding);

readAsDataURL()

The method takes in a File or Blob and produces a data URL. This is basically a base64 encoded string of the file data. You can use this data URL for things like setting the src property for an image.

var reader = new FileReader();

reader.onload = function (e) {
    var dataURL = reader.result;
};

reader.readAsDataURL(file);

readAsBinaryString()

The method can be used to read any type of file. It returns the raw binary data from the file. If you use this method along with XMLHttpRequest.sendAsBinary(), you can upload any file to a server using javascript.

var reader = new FileReader();

reader.onload = function(e) {
  var rawData = reader.result;
}

reader.readAsBinaryString(file);

readAsArrayBuffer()

The readAsArrayBuffer() method will read a Blob or File object and produce an ArrayBuffer. An ArrayBuffer is a fixed-length binary data buffer. They can come in handy when manipulating files (like converting a JPEG image to PNG).

var reader = new FileReader();

reader.onload = function(e) {
  var arrayBuffer = reader.result;
}

reader.readAsArrayBuffer(file);

abort()

This method will stop a read operation.

Examples for FileReader API

Example 1: Reading Image Files

// fileInput = document.getElementById("fileInput");
// fileDisplayArea = document.getElementById("fileDisplayArea");
fileInput.addEventListener('change', function(e) {
    var file = fileInput.files[0];
    var imageType = /image.*/;

    if (file.type.match(imageType)) {
        var reader = new FileReader();

        reader.onload = function(e) {
            fileDisplayArea.innerHTML = "";

            var img = new Image();
            img.src = reader.result;

            fileDisplayArea.appendChild(img);
        }

        reader.readAsDataURL(file);    
    } else {
        fileDisplayArea.innerHTML = "File not supported!"
    }
});

转载于:https://www.cnblogs.com/litefeather/p/6766870.html