首頁 > web前端 > js教程 > 主體

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

黄舟
發布: 2017-08-10 13:50:07
原創
1333 人瀏覽過

本篇文章主要介紹了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);
        }
    });
登入後複製

需要注意:

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

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

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

  4. 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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板