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

This article introduces the relevant knowledge of "how to use FormData in jQuery's ajax to achieve page upload without refresh". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1. Look at the effect picture first.

The desired function and effect is simple: click the upload file form control on the page, select the file and click "ajax submit" to upload the file to the server. After the upload is successful, the page gives a simple prompt.

2, the code of the front end

Look at the html code:

Ajax submission form submission

The code is very simple, it is important to note that the form form is not used in the page, so how to submit the data? the answer is to use FormData to simulate the controls in the form. In addition, the styles on the page are not written. Let's take a look at the upload01.js code introduced in html, which is the key point.

Upload01.js Code:

On ('change', function (e) {$(' input [name = myfile]'). On ('click', function (e) {var formData = new FormData (); / / formData.ppend (name, element); formData.append (' myfile', $('input [name = myfile]') [0] .files [0]) $.ajax ({url: 'upload.php', method:' POST', data: formData, contentType: false, / / Note that it should be set to false processData: false, cache: false, success: function (data) {if (JSON.parse (data). Result = = 1) {$('.prompt') .html (`File ${JSON.parse (data) .filename} uploaded successfully `) }, error: function (jqXHR) {console.log (JSON.stringify (jqXHR));}}) .done (function (data) {console.log ('done');}) .fail (function (data) {console.log (' fail');}) .always (function (data) {console.log ('always');}) })

(1) FormData is explained below, which involves lines 4, 6, and 10 of the code.

Line 4 var formData = new FormData (); instantiates an empty FormData object, which can be thought of as an form form, but now there are no controls in it.

Line 6 formData.append ('myfile', $(' input [name = myfile]') [0] .files [0]);, add a control to the instantiated formdata object, notice that the existing control is added here (see line 4 of html code).

The FormData.append (name, value, filename) method can easily add controls to FormData in the form of "key-value" pairs. Note that the third parameter, "upload name", is optional. For its specific syntax and usage, see FormData.

In line 10, the instantiated formData is passed in as the value of the data parameter of the jQuery.ajax () method and submitted to the back-end server.

(2) explain the parameters of contentType and processData in ajax () method.

The contentType parameter, the contentType in the request header set when the http request is initiated. The default value of jQuery.ajax () is: 'application/x-www-form-urlencoded; charset=UTF-8', this is applicable in most cases.

However, after testing, it will report an error by default, because there is an input type= "file" in the data sent, so contentType should be set to 'multipart/form-data', but if specified as this type of server (php), it will report this error: Warning: Missing boundary in multipart/form-data POST data in Unknown on line 0. The exact reason is not clear, so set contentType to false first, that is, do not let jQuery set contentType.

ProcessData parameter, according to the explanation in the jQuery.ajax () document, by default, jQuery will process the sent data and convert the data into a query string according to the requirements of 'application/x-www-form-urlencoded'. If the data to be sent is DOMDocument or does not need to be processed, it can be set to false to not allow jQuery to convert data. The data we want to send here is actually DOMDocument.

After testing, if the default (true) is maintained, js will report an error before initiating the request: TypeError: 'append' called on an object that does not implement interface FormData.

There is also a dataType parameter that expects the format of the data to be returned from the server, which is best not specified here. Instead, let jquery judge itself based on the contentType in the http response header, and then return an appropriate data type. The specified data will not affect the logical processing of the daemon, but the data you receive at the front end is probably not the expected data, so js will report this kind of error: SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data, which is the error reported after specifying dataType as json.

3, the php code of the backend

The back-end server is nginx, which uses php to process the sent data, and the code is also very simple:

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.