File, FileReader, and Ajax File Upload instance analysis (php) _ javascript skills

File, FileReader, and Ajax File Upload instance analysis (php). For more information, see. What can File FileReader do?
Ajax File Upload example
The FileReader object can read the Base64 encoded data (readAsDataURL), binary string (readAsBinaryString), and text (readAsText) of the file and is asynchronous.
By the way, you can use FileReader and Ajax to upload attachments by dragging the Email.

File object
The File object can be obtained from the input [type = file]. files array and drag event. dataTransfer. files.
The first figure is the File object in Chrome, and the second figure is the File object in Firefox. There are several more methods in Firefox. Note that the Data Reading method here is synchronous.




FileReader object
This is used to read file data (and is asynchronous ). The following is a simple code (the file object is obtained using the above method)

The Code is as follows:

Var fileReader = new FileReader ();
FileReader. onloadend = function (){
Console. log (this. readyState); // this time should be 2
Console. log (this. result); reads the completed callback function, and stores the data in the result
}
FileReader. readAsBinaryString (file); // starts to read binary data. asynchronous parameters are file objects.
// FileReader. readAsDataURL (file); // read Base64
// FileReader. readAsText (file); // read text information

You can run the following simple example (chrome and firefox are valid)

The Code is as follows:

Html5 File and FileReader

(Drag the image here) Get the file base64 encoding using FileReader