HTML5 allows you to preview local images,

HTML5 allows you to preview local images,

Problem description
Suppose we have an Image Upload control in HTML:

The Code is as follows:
<Input id = "upload_image" type = "file" name = "image" accept = "image/*"/>

Note that this accept = "image/*" is very important. It specifies the image to be uploaded and is associated with the pop-up window selection type of the system at the mobile end.
Then, the question is, can we read the image content before submitting this form to the server?
It seems simple. All files are client files. It should be okay, but there is no good way to do it before. However, since HTML5 is available, this function has come back, fileReader allows you to easily implement this function.
Example

The Code is as follows:
$ (Function (){
$ ('# Upload_image'). change (function (event ){
// Obtain the HTML5 js object of the file based on <input>
Var files = event.tar get. files, file;
If (files & files. length> 0 ){
// Obtain the currently uploaded file
File = files [0];
// You can view the object in the console.
Console. log (file );
// You can check the file size.
If (file. size> 1024*1024*2 ){
Alert ('the image size cannot exceed 2 MB! ');
Return false;
}
//!!!!!!
// The following is the key. An available image URL is generated through this file object.
// Obtain the window URL Tool
Var URL = window. URL | window. webkitURL;
// Generate the target url through file
Var imgURL = URL. createObjectURL (file );
// Use this URL to generate a display
$ ('Body'). append ($ (''). attr ('src', imgURL ));
// Use the following sentence to release the servo of this url in the memory. After the URL is run, it will be invalid.
// URL. revokeObjectURL (imgURL );
}
});
});

Brief Description
The entire operation is designed as follows:
1. Trigger the event through the <file> change event and obtain the event object;
2. Get the js object file of the uploaded file through the event object;
3. Use the window. URL tool to generate an available URL from the file object;
4. Place the URL for use;
5. * release the servo of this URL
Key points:
1. For the same file, each time you call URL. createObjectURL, a different URL is generated;
2. When the URL. createObjectURL is called, the browser automatically opens up space in the memory for Servo the URL, that is, making the URL request successful;
3. If URL. revokeObjectURL (imgURL) is called, The servo will turn it off and 404 will be requested for this URL;
4. This is all about the client. The server knows nothing about this, including the picture you choose;
5. This imgURL looks like this: blob: http % 3A // localhost % 3A8000/22cc97d5-5e46-4d87-9df4-c3e8c0aa72bb