Detailed explanation of JS+HTML5 FileReader object usage

This article mainly introduces the usage of JS+HTML5 FileReader object, and analyzes the common methods and simple usage techniques of FileReader object in combination with specific examples. Friends in need can refer to it

The examples in this article describe JS+ HTML5 FileReader object usage. Share it with everyone for your reference, the details are as follows:

There are four methods in the FileReader instance to read file data

1, readAsBinaryString(Blob|File )<br>2、readAsDataURL(Blob|File)<br>3、readAsText(Blob|File)<br>4、readAsArrayBuffer(Blob| File)

FileReader instance contains many events (onerror, onprogress, onload[result])

<input name="file" id="uploadFile" />

var file = document.getElementById("uploadFile");
var bufferSize = 1024;
var pos = 0;
var onload = function(e) {
   console.log("Read", e.target.result);
   var img = document.createElement("img");
   img.src = e.target.result;
   img.width = 300;
   img.height = 300;
   document.body.appendChild(img);
};
var onerror = function() {}
var onprogress = function(e) {}
file.onchange = function() {
   if (file.files) file = file.files[0];
   while (pos < file.size) {
    var reader = new FileReader();
    reader.onload = onload;
    reader.onerror = onerror;
    /*reader.readAsText(file.slice(pos, bufferSize));
    pos += bufferSize; */
    reader.readAsDataURL(file);
    pos = file.size + 1;
   }
}

The above is the detailed content of Detailed explanation of JS+HTML5 FileReader object usage. For more information, please follow other related articles on the PHP Chinese website!