JavaScript如何利用Ajax上傳檔案的方法介紹-js教程-PHP中文網

JavaScript如何利用Ajax上傳檔案的方法介紹

黄舟

發布： 2017-08-10 13:50:07

原創

1367 人瀏覽過

本篇文章主要介紹了JavaScript使用Ajax上傳檔案的範例程式碼，詳細的介紹了兩種上傳方式，有興趣的小夥伴可以了解一下

本文介紹了JavaScript使用Ajax上傳檔案的範例程式碼，分享給大家，如下：

實作檔案的上傳主要有兩種方式：

使用form表單提交上傳

html程式碼如下：

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

登入後複製

此時的JavaScript程式碼如下：

 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);
        }
    });

登入後複製

需要注意：

processData設定為false。因為data值是FormData對象，不需要對資料做處理。
標籤新增enctype="multipart/form-data"屬性。
cache設定為false，上傳檔案不需要快取。
contentType設定為false。因為是由表單建構的FormData對象，而且已經宣告了屬性enctype="multipart/form-data"，所以這裡設定為false。

使用FormData物件新增欄位方式上傳檔案

#html程式碼如下：

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

登入後複製

JavaScript實作如下：

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);
  }

登入後複製

這裡有幾處不一樣：

append()的第二個參數應是檔案對象，即$('#file')[0].files[0]。 contentType也要設定為false。
從程式碼$('#file')[0].files[0]中可以看到一個標籤能夠上傳多個文件，只需要在裡面加入multiple或multiple="multiple"屬性。

以上是JavaScript如何利用Ajax上傳檔案的方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！