javascript - html5 multiple image upload
習慣沉默
習慣沉默 2017-05-16 13:02:56
0
3
519

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.

習慣沉默
習慣沉默

reply all(3)
刘奇

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.

滿天的星座

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

阿神

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

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template