亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

JavaScript使用Ajax上傳文件的示例代碼

發布時間:2020-09-06 19:52:21 來源:腳本之家 閱讀:158 作者:yangzhanmei 欄目:web開發

本文介紹了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. <form>標簽添加enctype="multipart/form-data"屬性。
  3. cache設置為false,上傳文件不需要緩存。
  4. contentType設置為false。因為是由<form>表單構造的FormData對象,且已經聲明了屬性enctype="multipart/form-data",所以這里設置為false。

使用FormData對象添加字段方式上傳文件

html代碼如下:

<div id="uploadDiv">
  <input id="file" type="file"/>
  <button id="upload" type="button">上傳</button>
</div>

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]中可以看到一個<input type="file">標簽能夠上傳多個文件,只需要在<input type="file">里添加multiple或multiple="multiple"屬性。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持億速云。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

福泉市| 恩施市| 新干县| 广宁县| 京山县| 柳江县| 牡丹江市| 宁德市| 翁牛特旗| 奎屯市| 永春县| 阿拉尔市| 扶沟县| 锡林浩特市| 阿城市| 江永县| 黔南| 长治市| 漯河市| 两当县| 阿图什市| 南乐县| 毕节市| 尖扎县| 石泉县| 故城县| 三江| 基隆市| 澄江县| 锦屏县| 信阳市| 高密市| 竹山县| 鄂托克旗| 东乌| 延庆县| 长顺县| 都昌县| 镇雄县| 行唐县| 尉氏县|