Various implementation methods of file upload in web development (with code)

File uploading is a common requirement in Web development. You need to use the file input box to upload files. If you add a multiple attribute to the file input box, you can select multiple files at once. File (unsupported browsers will automatically ignore this attribute)

<input multiple type="file">

Click this input box to open the browse file dialog box to select files. Generally, one input box is enough to upload one file, and multiple files can be uploaded. You can use multiple input boxes to handle this. This is done to be compatible with browsers that do not support the multiple attribute. At the same time, users generally will not select multiple files

(recommended Study: HTML video tutorial )

Basic upload method

Put the file input box into the form. When submitting the form, you can submit the selected files together and upload them to the server. It should be noted that since the submitted form contains files, you need to modify the enctype of the form elements. The attribute is multipart/form-data

<form action="#" enctype="multipart/form-data" method="post">
  <input name="file" type="file">
  <button type="submit">Upload</button>
</form>

This upload method is a traditional synchronous upload. If the uploaded file is large, you often need to wait for a long time, and the page will be reloaded after the upload is completed. And you must wait for the upload to complete before continuing.

Early browsers do not support asynchronous upload, but you can use iframe to simulate it, hide an