Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to upload files at the front end of web". In daily operation, I believe many people have doubts about how to upload files at the front end of web. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts about "how to upload files from web front end". Next, please follow the editor to study!

Upload files

There will be a lot of file upload requirements in the project, such as avatar upload, form files, word documents, etc.

Upload prerequisite form elements:

When uploading files

1. The form must be an post request

two。 The form must declare not to encode the data-enctype=multipart/form-data

The format of the transferred data is in the form of key-value pairs, and the data are all of the data type of js, but when the file is transferred, there are only two forms to transfer:

Describe a file in the form of a string

Describe a file in the form of a file stream

Upload traditional development mode

The front and rear ends are mixed together for development.

For uploading in traditional development mode, you need to transfer the files selected in the form to the backend for upload:

The enctype attribute must be in the form at this time, as shown in the following figure:

After clicking the upload button, the backend uploads the file, taking php as an example:

Echo upload file name:. $_ FILES ["avatar"] ["name"]. "

The name of the uploaded file echo "File Type:" .$ _ FILES ["avatar"] ["type"]. "

Type of uploaded file echo "File size:". ($_ FILES ["avatar"] ["size"] / 1024) " KB

The size of the uploaded file, in bytes echo "temporary storage location of the file:. $_ FILES [" avatar "] [" tmp_name "]; name of the temporary copy of the file stored on the server echo $_ FILES [" file "] [" error "] error code caused by file upload

Save the file to the server:

Move_uploaded_file ($_ FILES ["avatar"] ["tmp_name"], "upload/". $_ FILES ["avatar"] ["name"]); the echo "file is stored in:". "upload/". $_ FILES ["avatar"] ["name"]

In actual development, in order to improve efficiency, front and rear separate development is usually used.

Front and back end separate upload

The front end does the front end, the back end does the back end, and finally uses the interface document to dock-the core technology is ajax.

The front and back ends are developed separately, and the main technology of application is ajax. Upload can also be uploaded using ajax.

FormData is a built-in constructor of js, and the constructed object can recognize the file information.

Mode of use:

Construct the FormData object, add the file information to the FormData object, and then upload it.

File information in the file selection control: form .files

Example:

Document.querySelector ('[type= "button"]'). Onclick = function () {console.log (document.querySelector ('[type= "file"]') .files)}

The FormData object has a feature: after adding the file information to it, the file information cannot be seen by direct printing, and you need to use for of traversal to see it:

Var formdata = new FormData (); var fileinfo = document.querySelector ('[type= "file"]'). Files [0]; formdata.append ('avatar',fileinfo) / add file information to the FormData object console.log (formdata) for (var v of formdata) {console.log (v)}

You can also add other data to the FormData object and submit it together:

Formdata.append ('avatar',fileinfo) formdata.append (' age',12) for (var v of formdata) {console.log (v)}

To delete a piece of data from the FormData object, use:

Formdata.delete (key)

Sometimes, we need to upload multiple files in a form. Instead of appending a file information to the FormData, we can pass in the entire form object when constructing the FormData object, and he will automatically recognize all the data:

Document.querySelector ('[type= "button"]'). Onclick = function () {var formdata = new FormData (document.querySelector ('form')); for (var v of formdata) {console.log (v)}}

When uploading using FormData, the FormData object is passed in as data. There is no need to modify the request header, and the browser will automatically modify it.

At this time, the front and rear ends have been uploaded separately, but there is a function to preview images in normal projects.

We can let the backend transmit the uploaded file name to the front end after the upload, and let the front end render the returned image path.

But this is previewed after uploading. Suppose we select a file and want to see whether the file is to be uploaded, that is, if we want to preview it before uploading, there is still no way to achieve it.

We can use the FileReader provided by H5 to read and preview the file, and then decide whether to upload it or not.

Ajax upload

After uploading ajax,

Var xhr = new XMLHttpRequest; xhr.onreadystatechange = function () {if (xhr.readyState = 4) {if (xhr.status > = 200 & & xhr.status

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.