Home  >  Article  >  Web Front-end  >  Detailed explanation of JS+HTML5 FileReader object usage

Detailed explanation of JS+HTML5 FileReader object usage

怪我咯
怪我咯Original
2017-04-30 10:49:252033browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn