The input tag of the file attribute can select files.
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.
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.
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.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
I think so:
The input tag of the file attribute can select files.
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.
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.
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