HTML5 the file API reads the files information

HTML structure:

 <  div  id  = "Fileimage"  ></ div     >  <  input  type  = "File"   = "Upload"   ID  = "FileInput"     >  <  p  id  = "FileInfo"  ></ p  >  

CSS style:

#fileImage {width: 300px; height: 300px; margin: 20px auto; background-repeat:  ;  Background-position: Left  top;  Background-size: contain; }        #fileInfo{border: 1px solid #eee;}

JS Code:

varFileInput = document.getElementById ("FileInput"), Fileimage= document.getElementById ("Fileimage"), FileInfo= document.getElementById ("FileInfo"); //Listen for change eventsFileinput.addeventlistener (' Change ',function(){        //clear the Preview area background pictureFileImage.style.backgroundImage = ' '; //Check whether the file is selected        if(!fileinput.value) {fileinfo.innerhtml= "No Files selected"; return; }                //get a reference to a file        varFile = Fileinput.files[0]; //Get file Informationfileinfo.innerhtml = ' file ' +file.name+ ' <br> ' + ' size ' +file.size+ ' <br> ' + ' Modify ' +file.lastmodifieddate+ ' <br> '; if(File.type!== ' image/jpeg ' && file.type!== ' image/png ' && file.type!== ' image/gif ') {alert (' Not a valid picture '); return; }                //Read File        varReader =NewFileReader (); Reader.onload=function(e) {vardata =E.target.result; FileImage.style.backgroundImage= ' url (' +data+ ') '; }         //read the file in dataurl form:reader.readasdataurl (file); });

After you select a file, you can see the file name, size, modified time, or preview the picture. The file read in the form of Dataurl is a string, similar to data:image/jpeg;base64,/9j/4AAQSk...(base64编码)... , commonly used to set the image. If server-side processing is required, base64, character the character after the string to the server and decodes it with Base64 to get the binary contents of the original file. The above is an example of using the file API to manipulate files, excerpt from teacher Liao's JS tutorial.

File API Excuses Overview

FileList interface: A JS object that can be used to represent a set of files, such as a list of local files that the user selects by input[type= the "file" element

Blob interface: Used to represent a piece of binary data, and allows us to "cut" its data in bytes by JS

File interface: Used to transport a document, is inherited from the Blob interface, and on this basis added such as file name, MIME type and other features

FileReader interface: Provides methods and events for reading files

FileList interface

1. #FileList [index]//Get index file

Blob interface

1. #Blob. Size//read-only attribute, number of bytes in data
2. #Blob. Slice (start, length)//Cut the current file and return the result

File interface

1. #File. Size//Inherit from Blob, ibid.
2. #File. Slice (start, length)//Inherit from Blob, ibid.
3. #File. Name//Read-only property, file name
4. #File. Type//Read-only property, MIME type of file
5. #File. Urn//read-only property, which represents the urn of the file, is almost useless and ignores

FileReader method

1. #FileReader. Readasbinarystring (Blob/file)//Read file contents in binary format
2. #FileReader. Readastext (file, [encoding])//reads the contents of the file in a text (and string) format, and can force the selection of the file encoding
3. #FileReader. Readasdataurl (file)//read content in Dataurl format
4. #FileReader. Abort ()//Terminate read operation

FileReader Events

1. #FileReader. Onloadstart//trigger at start of read operation
2. #FileReader. onload//triggered when read operation succeeds
3. #FileReader. Onloadend//trigger on completion of read operation (whether successful or unsuccessful)
4. #FileReader. OnProgress//trigger during read operation
5. #FileReader. Onabort//triggered when read operation is interrupted
6. #FileReader. onerror//Trigger when read operation fails

FileReader Property

1. #FileReader. Result//Results read (binary, text, or dataurl format)
2. #FileReader. ReadyState//Status of read operation (EMPTY, LOADING, done)

3. Three points of attention to the practice of FILEAPI

   1. Since the specification has not yet been due, #File. Urn still has a large variable, WebKit does not implement this feature

   2. #Blob. Slice added a prefix to the WebKit kernel, that is, #blob.webkitslice, and the second parameter is not "length", but "end", in other words, the above example should be changed to File.webkitslice (3, size ) to take effect

   3. Various error handling and exception handling are also clearly specified in the specification, which is equally important: whether for a complete set of specifications or for a robust program.

HTML5 the file API reads the files information