HTML5 implementation of previewing local images _html5 tutorial skills

Problem Description
Suppose we have an image upload control in HTML:

Copy code

The code is as follows :

Note that accept="image/*" is very important. It specifies that the image to be uploaded will be related to the system's pop-up window selection type and other issues on the mobile terminal. Be sure to add it.
Then, the question is, is there any way to read the content of the image before submitting the form to the server?
It seems simple, they are all client files, so it should be possible, but there was really no good way before, but since the advent of HTML5, this function has come back, and this function can be easily realized through FileReader.
Examples illustrate the problem

Copy code

The code is as follows:

$(function () {
$('#upload_image').change(function(event) {
// Get the HTML5 js object of the file based on this
var files = event.target.files, file;
if (files && files.length > 0) {
// Get the currently uploaded files
file = files[0];
// Let’s see what this is in the console What is the object?
console.log(file);
// Then we can do actions such as file size verification
if(file.size > 1024 * 1024 * 2) {
alert('Picture size cannot exceed 2MB!');
return false;
}
// !!!!!!
// The following is the key, generate a through this file object Available image URL
// Get window URL tool
var URL = window.URL || window.webkitURL;
// Generate target url through file
var imgURL = URL.createObjectURL(file );
// Use this URL to generate an and display it
$('body').append($('').attr('src', imgURL));
// Use the following sentence to release the server for this url in the memory. After running, the URL will be invalid
// URL.revokeObjectURL(imgURL);
}
});
});

Brief description
In short, the entire operation design is as follows:
1. Trigger the event through the change event of and obtain the event object;
2. Get the js object file of the uploaded file through the event object;
3. Generate a usable URL from the file object through the window.URL tool;
4. Put this URL into use;
5.* Release The key points of this URL's server
:
1. For the same file, each time URL.createObjectURL is called, a different URL will be regenerated;
2. Call the URL When .createObjectURL, the browser automatically opens up space in the memory to serve the URL, which means that the URL can be requested successfully;
3. If URL.revokeObjectURL(imgURL); is called, the server will Turn it off, and a 404 will appear when requesting this URL again;
4. All this is a matter of the client, and the server knows nothing about it, including the image you selected;
5. The imgURL is probably this Looks like: blob:http://localhost:8000/22cc97d5-5e46-4d87-9df4-c3e8c0aa72bb