Home > Web Front-end > JS Tutorial > body text

Introduction to how JavaScript uses Ajax to upload files

黄舟
Release: 2017-08-10 13:50:07
Original
1332 people have browsed it

This article mainly introduces the sample code of JavaScript using Ajax to upload files, and introduces the two upload methods in detail. Interested friends can learn about it

This article introduces the method of JavaScript using Ajax to upload files. The sample code is shared with everyone, as follows:

There are two main ways to upload files:

Use the form form to submit and upload the

html code as follows:


<form id="uploadForm" enctype="multipart/form-data">
  <input id="file" type="file" name="file"/>
  <button id="upload" type="button">上传</button>
</form>
Copy after login

The JavaScript code at this time is as follows:


 var formData = new FormDate($(&#39;#uploadForm&#39;)[0]);

 $.ajax({
        url: &#39;http://10.10.2.254:8080/file/associateupload&#39;,
        type: &#39;POST&#39;,
        cache: false,
        data: formData,
        processData: false,
        contentType: false,
        success:function(res){
            console.log(res);
        }
    });
Copy after login

Note:

  1. processData is set to false. Because the data value is a FormData object, there is no need to process the data.

  2. Add enctype="multipart/form-data" attribute to the tag.

  3. cache is set to false, and uploading files does not require caching.

  4. contentType is set to false. Because it is a FormData object constructed from the form, and the attribute enctype="multipart/form-data" has been declared, it is set to false here.

Use the FormData object to add fields to upload files

The html code is as follows:


<p id="uploadp">
  <input id="file" type="file"/>
  <button id="upload" type="button">上传</button>
</p>
Copy after login

JavaScript is implemented as follows:


var formData = new FormData();
formData.append(&#39;file&#39;, $(&#39;#file&#39;)[0].files[0]);
$.ajax({
  url: &#39;/upload&#39;,
  type: &#39;POST&#39;,
  cache: false,
  data: formData,
  processData: false,
  contentType: false,
  success:function(res){
     console.log(res);
  }
Copy after login

There are several differences here:

  • The second parameter of append() should It is a file object, that is, $('#file')[0].files[0]. contentType also needs to be set to false.

  • You can see from the code $('#file')[0].files[0] that an tag can upload multiple files , just add multiple or multiple="multiple" attributes in .

The above is the detailed content of Introduction to how JavaScript uses Ajax to upload files. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template