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

本篇文章主要介紹了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($('#uploadForm')[0]);

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

需要注意：

1. processData設定為false。因為data值是FormData對象，不需要對資料做處理。

2. ff9c23ada1bcecdd1a0fb5d5a0f18437標籤新增enctype="multipart/form-data"屬性。

3. cache設定為false，上傳檔案不需要快取。

4. contentType設定為false。因為是由ff9c23ada1bcecdd1a0fb5d5a0f18437表單建構的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('file', $('#file')[0].files[0]);
$.ajax({
  url: '/upload',
  type: 'POST',
  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]中可以看到一個3525558f8f338d4ea90ebf22e5cde2bc標籤能夠上傳多個文件，只需要在3525558f8f338d4ea90ebf22e5cde2bc裡面加入multiple或multiple="multiple"屬性。

#

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