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

FormData對像上傳文件

PHPz
發布: 2017-04-04 13:56:07
原創
1577 人瀏覽過

<a href="http://www.php.cn/wiki/125.html" target="_blank">For</a>mData物件,是可以使用一系列的鍵值對來模擬一個完整的表單,然後使用<a href="http://www.php.cn/wiki/1527.html" target="_blank">XML</a>HttpRequest發送這個"表單"。

網站 使用FormData物件有詳盡的

FormData物件使用說明。請求,那麼怎麼透過jQuery

Ajax上傳呢? #物件上傳檔案。 javascript程式碼

<form id="uploadForm" enctype="multipart/form-data">
    <input id="file" type="file" name="file"/>
    <button id="upload" type="button">upload</button>
</form>
登入後複製
這裡要注意幾點:<a href="http://www.php.cn/wiki/1495.html" target="_blank"></a>#processData
設定為false。因為data值是FormData

對象,不需要對資料做處理。 enctype="multipart/form-data"屬性。 #,上傳檔案不需要

快取

。 ;form>

表單建構的

FormData對象,且已經宣告了屬性enctype="multipart/form-data"

,所以這裡設定為false。

#上傳後,伺服器端程式碼需要使用從
    查詢
  • 參數名稱

    file來取得檔案輸入流對象,因為中宣告的是name="file"。 ?也沒有enctype="multipart/form-data"屬性。

    javascript程式碼
$.ajax({
    url: '/upload',
    type: 'POST',
    cache: false,
    data: new FormData($('#uploadForm')[0]),
    processData: false,
    contentType: false
}).done(function(res) {
}).fail(function(res) {});
登入後複製
  • 這裡有幾處不一樣:

    #append()的第二個參數應該是文件對象,即$('#file')[0].files[0]

  • contentType也要設定為‘false’。

    從程式碼
  • $('#file')[0].files[0]
  • 可以看到一個

    標籤能夠上傳多個文件,只需要在<input type="file">裡面加上multiplemultiple= "multiple"屬性。 伺服器端讀取檔案

  • Servlet 3.0 開始,可以透過request.getPart() request.getPars() 兩個介面取得上傳的檔案。

    這裡不多說,詳細請參考官網教學 Uploading Files with Java Servlet Technology 以及範例 The fileupload Example Application

    以上是FormData對像上傳文件的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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