javascript - html5 multiple image upload

Question

This is how I downloaded a demo, which uploaded multiple images in jquery. But I don’t understand his implementation idea.
< br>The main thing I want to know is how he uploads pictures to the page, and then clicks to start uploading and then uploads them all in one go. Could you please help me sort out the idea.

The link to the online demonstration of this demo is http://www.jq22.com/yanshi1604.

Answer 1

I think so:

1. The input tag of the file attribute can select files.

2. After selecting a file, access the FileList object through the files attribute of input, which contains information such as the file's last modification time, file name, file size, and file type. Here you can limit the size of transferred files. In the demo above, file name comparison should be used to prevent uploading of the same file.

3. Use the readAsDataURL() method of the FileReader object to obtain the base64 encoding corresponding to the image, and then create an img element in the box with the src attribute value as this base64, thus realizing the image preview function.

4. Click the upload button and upload to the background through AJAX.

You can read this article for a more complete summary. For a slightly simpler summary, you can see the notes I summarized.

Answer 2

If you have multiple pictures, just put the elements into the array and pass them together

Answer 3

Just put it in the array and pass it together using file