Projects often use a lot of pictures to upload. When it comes to the past, we often download some materials from the Internet and use them directly. However, with the increase of projects, we find that there are all kinds of pictures, which leads to great confusion. So I took the time to write a demo to sort out the fluency of image upload and the points that need to be paid attention to in single image and multi image upload.
Multi image upload
Multi image upload, here is just to do the front-end display effect. In the actual project, multi image upload should send a request to the background after uploading a picture each time, and then the background returns to the IMG path for display.
Why must it be introduced into the background to show?
1. If the base64 image path is displayed directly in the foreground, the request will be sent to the background. If there is an error in the interface, it will give the user the illusion that the image is uploaded successfully, but the background does not receive the image;
2. Every time the file changes, the previous files will be covered. If the direct presentation is submitted without Ajax, the final submission with form will only submit the last one.
Single image upload
Remove the multiple attribute in input and it becomes a single image upload;
<input type="file" name="file" value="" accept="image/*" onchange="uploadImg(this);">
According to the above code, you can upload single image and multiple images directly. The following is about the issues that need to be paid attention to when uploading and submitting single and multiple images;
1. A single image upload can be submitted along with the form, and a name value can be given to the input, which can be submitted in the background;
2. Multi image upload cannot be submitted with the form, because the file will only keep the latest after each upload; First, after the image is submitted successfully through Ajax, create a hidden input in the form, set the background return path to the Val value of the input, and then submit it with the form; Note that the name value of the hidden input is written in the form of , for example: name = [img]]. In this way, when the form is submitted, the background can receive all the pictures;
The above code is applicable to the display after the front end clicks file to upload the image. Specific interaction with the background can be increased according to the needs of the actual project!
The above is the whole content of this article, I hope to help you learn, and I hope you can support developer more.