javascript - html5 多图片上传

Question

是这样的我下了个demo，是jquery里面多个图片上传的。但是不懂他的实现思路。

主要就是想知道他这种将图片上传到页面，然后点一下开始上传就统一上传是怎么实现的，有劳大神们帮我大致理一下思路。

这个demo的在线演示的链接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