javascript - How to submit a form with pictures using ajax post method

Question

<form>
    <input name="xxxx" type="text">
    <input name="images" type="file" multiple="multiple" >
</form>

Because there are multiple pictures in the second form, how to submit the data of the above two forms together when submitting the form using ajax post method?

Answer 1

Use formData

Answer 2

Ask the backend! Generally, the key returned by uploading the image is given to the backend, and the form is defined by the backend.

Answer 3

Use html5 to convert the image to BASE64, and then return it to the background through ajax. The background converts the image into the image format and stores it in the server through base64.
You can refer to this textbook
http://www.zhangxinxu.com/wor...

Answer 4

When uploading images, base64 encoding is the correct solution.

Answer 5

The above are all ideas, I provide a simpler method, using ajaxsubmit, plug-in

Answer 6

Don’t convert to base64, it will increase by 1/3. Browsers that support drawing the image in the input onto the canvas and then fetching base64 must already support xhr2.0 or fetch API.

Answer 7

Create a formdata object, assign a value to the object, and submit the formdata object as ajax data.
It is recommended to take a look at this
http://www.ruanyifeng.com/blo...

Answer 8

Uploading files generally requires either direct form submission (but the entire page will be refreshed, and partial refresh can be achieved by embedding into an iframe), which will be parsed by the backend itself; or uploaded according to the w3c standard formData. Generally, plug-ins also use these two methods.