Several methods of uploading files in front end

The first type: classic form and input upload.

Set the aciton of the form as the back-end page with enctype="multipart/form-data "and type =' post'.

& lt form? action='/'？ enctype="multipart/form-data "？ Type =' post'>& lt input? Type =' file'>& lt input? type='hidden '？ Name =' userid'>& lt Enter? type='hidden '？ Name =' signature'> & ltbutton & gt make it obey.

Type =' submit'> button is triggered, and the second is to execute the form.submit () method in js.

Advantages: simple and convenient to use, good compatibility, basically supported by all browsers.

Disadvantages: 1 After submitting the data, the page will jump (how to prohibit page jumping will be discussed below).

2. Because the request is initiated by the browser, not ajax, the front end can't know when the upload will be completed.

3. To send data other than files in a form, a new type=hidden input and value =' data to transmit' is generally created. Every time you send data, you need an input, which makes dom redundant.

Tip:

After submitting the data, the form will automatically jump to the page specified by action. To prevent page jumping, you can create an empty ifame in the page, such as name='upload', and then set the target="Uploader "of the form. The form has a target property that specifies where to open the action, so that the form will remain in the current page after submitting the data. The code is as follows:

& lt form? action='/'？ enctype="multipart/form-data "？ type='post '？ Target = "uploader1"> < enter? Type =' file'>& ltbutton & gt make it obey.

UploadFile.php', assuming that the page returns an address after processing the data, this address will be written in the previous iframe. So when the onload function of iName is triggered, that is, after the upload is completed, the data returned by the backend can be read in iframe.

var？ iframe？ =? document . getelementbyid(' upload 1 ')；

iframe.onload？ =? Function? ()? {?

var？ Doctor. =? window . frames[' uploader 1 ']。 Documentation; var？ pre？ =? doc . getelementsbytagname(' pre ')； var？ obj？ =? JSON.parse(pre[0])。 innerHTML)；

} When using this method, it should be noted that iframe has cross-domain restrictions. If the address of the created iframe is different from the current page address, an error will be reported. In this case, it is suggested that you request an interface from the back end and get the file address in the onload function of iframe instead of reading it directly in iframe. Or return such data.

& lt script? type = " text/JavaScript " & gt； Window. top. window[ callback] (data) ; Callback is a name agreed with the front end. After the upload is completed, trigger this function to return back-end data.

The second type: upload using formData.

Using js to construct form data is simple and efficient, but it is only compatible with IE 10, so children's shoes that need to be compatible with IE9 should skip this method.

html:

& lt input? type = ' file ' & gtjs:

var？ formData？ =? New? FormData()；

formData.append("userid "，userid)；

FormData.append("signature ",signature);

FormData.append("file ",file); ? //The file is blob data//Then use ajax to send formData to the server. Be sure to upload it by mail.

Description: The first method refers to creating multiple inputs of type "hidden" to send signature data. Here, you can use the formData.append method instead of this operation, which can avoid multiple inputs in the dom. Finally, the file data is also appended to formData and sent to the server to complete the upload.

Advantages: Because this method is ajax upload, you can know the upload completion time accurately and receive callback data conveniently.

Disadvantages: poor compatibility

The third type: use fileReader to read file data and upload it.

The new api compatibility of HTML5 is not particularly good, only compatible with IE 10.

var？ Fred? =? New? FileReader()；

Fr.readAsDataURL (file);

fr.onload？ =? Function? (event)? {var？ Data =? Event, goal and result; ? //The data obtained here is img.src in base64 format? =? Data;

ajax(url，{data}？ ，function(){})

} The data obtained above can be used to realize the local preview of the picture before uploading, and can also be used to send base64 data to the backend and then return the corresponding address of the data block.

Advantages:? Just like the second one.

Disadvantages: Sending a large amount of base64 data at a time will cause the browser to get stuck, and the server may have problems receiving such data.