Use the FormData feature of H5 to upload files without refreshing,

Use the FormData feature of H5 to upload files without refreshing,

Previously, my friend did not refresh the uploaded files. The most violent solution is to search for various JS libraries on the Internet, with multi-image uploads, previews, and even image processing. If you do not have access to third-party libraries, you can use ajax. The solution provided by someone is to use iframe, so I will not go into details here. But Html5 is a good thing. It provides FormData. FormData can help us piece together parameters and even file resources. In this way, we can easily use $. ajax without refreshing the upload. Iframe is not required either.

Code

The following are the front-end parts.

<!DOCTYLE html><meta charset=utf->
I will not go into details about the code here. I will talk about a line of code.
var data = new FormData($('#add')[0]);
FormData is a form object that forms the form fields of form objects to form key => value respectively. Then, can we splice the additional key => value by ourselves? The answer is yes. For details, we can use Baidu FormData.
And why $ ('# add') [0]?

I can only say js = jQuery [0];
PHP Section
<?php   header('Content-Type:application/json; charset=utf-8');  echo json_encode(array($_FILES,$_REQUEST));?>
This is just a test. If you can see that $ _ FILES has something, we can upload it.
Test upload
We can see that the ajax request is sent to ajax. php.
 
Check the preview to view the information about $ _ FILES returned.