Home > Developer > JavaScript
1 , FileReader Object Introduction
1. Detection of browser support for FileReader
if (window. FileReader) {
var fr = new FileReader ();
Add your code here
}
else {
Alert ("Not supported by your browser!");
}
Methods to invoke the FileReader object
The FileReader instance has 4 methods, 3 of which are used to read the file and the other to interrupt the read. The following table lists the methods and their parameters and functions.
Note that the method does not return read results regardless of the read success or failure, which is stored in the result property.
Method name |
Parameters |
Describe |
abort |
none |
interrupt read |
readasbinarystring |
file |
Read file as binary code |
readasdataurl |
file |
|
readastext |
file, [encoding] |
|
Readastext : The method has two parameters, where the second parameter is the encoding of the text, and the default value is UTF-8. This method is very easy to understand, the file is read in text mode, the result of reading is the content of this text file.
readasbinarystring : This method reads a file as a binary string, usually we pass it to the back end, and the backend can store the file through this string.
Readasdataurl : This is the method used in the example program, which reads a file as a string beginning with data: The essence of this string is that the data Url,data URL is a scheme for embedding small files directly into a document. Small files here usually refer to files in the format of images and HTML. (The way in which Base64 is obtained.) ）
2. Introduction to FileReader handling events
The FileReader contains a complete set of event models that capture the state of the file when it is read, and the following table summarizes these events.
Event |
Describe |
Onabort |
Trigger on interrupt |
OnError |
Triggered when an error occurs |
OnLoad |
Trigger when file read completes successfully |
Onloadend |
Read completion trigger, regardless of success or failure |
Onloadstart |
Trigger at start of Read |
OnProgress |
Read in |
Once a file begins to read, the result property of the instance is populated, regardless of success or failure. If the read fails, the value of result is null, otherwise it is the result of the read, and the vast majority of programs will fetch the value when the file is successfully read.
Fr.onload = function () {
This.result;
};
Example 1:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>FileReader</title>
<body>
<p>
<label> Please select a file:</label>
<inputtype= "File" id= "file"/>
<inputtype= "button" value= "read image" onclick= "Readasdataurl ()"/>
<inputtype= "button" value= "read binary data" onclick= "readasbinarystring ()"/>
<inputtype= "button" value= "read text file" onclick= "Readastext ()"/>
</p>
<div id= "Result" name= "result" ></div>
</body>
<script type= "Text/javascript" >
var Result=document.getelementbyid ("result");
var File=document.getelementbyid ("file");
Determine if the browser supports the FileReader interface
if (typeof FileReader = = ' undefined ') {
Result. Innerhtml= "<p> your browser does not support FileReader interface! </p> ";
//Make the selection control not operational
File.setattribute ("Disabled", "disabled");
}
function Readasdataurl () {
//Check whether it is an image file
var file = document.getElementById ("file"). Files[0];
if (!/image\/\w+/.test (File.type)) {
Alert ("See Clearly, this needs a picture!") ");
return false;
}
var reader = new FileReader ();
//Read the file into the page as a data URL
Reader.readasdataurl (file);
Reader.onload=function (e) {
Varresult=document.getelementbyid ("result");
//Display file
Result.innerhtml= ' ';
}
}
function readasbinarystring () {
var file = document.getElementById ("file"). Files[0];
var reader = new FileReader ();
//Read the file into the page in binary form
reader.readasbinarystring (file);
Reader.onload=function (f) {
Varresult=document.getelementbyid ("result");
//Display file
Result.innerhtml=this.result;
}
}
function Readastext () {
var file =document.getelementbyid ("file"). Files[0];
var reader = new FileReader ();
//Read the file into the page in text form
Reader.readastext (file);
Reader.onload=function (f) {
var Result=document.getelementbyid ("result");
//Display file
Result.innerhtml=this.result;
}
}
</script>
3 , using JS of the FileReader Object Implementation Image Preview function when uploading pictures
<! DOCTYPE html>
<meta name= "viewport" content= "Width=device-width,initial-scale=1,user-scalable=no" >
<meta http-equiv= "Content-type" content= "Text/html;charset=utf-8"/>
<meta name= "format-detection" content= "Telephone=no" >
<title>test</title>
<script>
Preview feature when selecting pictures
function Imageshow (source) {
var file =source.files[0];
var imageID = source.id;
if (window. FileReader) {
var fr = new FileReader ();
Fr.onloadend = function (e) {
document.getElementById ("Portrait" +imageid). SRC =e.target.result;
};
Fr.readasdataurl (file);
}
document.getElementById ("image" +imageid). style.display= "None";
document.getElementById ("Show" +imageid). style.display= "Block";
}
</script>
<body>
<div >
<divid= "Image1" >
<p> Upload </p>
<inputtype= "File" Name= "Screenshot1" id= "1" onchange= "imageshow (This)"/>
</div>
<divid= "Show1" style= "Display:none;" >
</div>
<divid= "Image2" >
<p> Upload </p>
<inputtype= "File" Name= "Screenshot2" id= "2" onchange= "Imageshow (This)"/>
</div>
<div id= "Show2" style= "Display:none;" >
</div>
<divid= "Image3" >
<p> Upload </p>
<inputtype= "File" Name= "Screenshot3" id= "3" onchange= "Imageshow (This)"/>
</div>
<div id= "show3" style= "Display:none;" >
</div>
</div>
</body>
Reference Original: http://www.cnblogs.com/faith3/p/6371477.html
FileReader object in JavaScript (implements upload image preview)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
