欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2017年08月10日 10:45:13   作者：yangzhanmei  
本篇文章主要介紹了JavaScript使用Ajax上傳文件的示例代碼，詳細(xì)的介紹了兩種上傳方式，感興趣的小伙伴可以了解一下

本文介紹了JavaScript使用Ajax上傳文件的示例代碼，分享給大家，具體如下：

實(shí)現(xiàn)文件的上傳主要有兩種方式：

使用form表單提交上傳

html代碼如下：

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

此時(shí)的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設(shè)置為false。因?yàn)閐ata值是FormData對象，不需要對數(shù)據(jù)做處理。
  2. <form>標(biāo)簽添加enctype="multipart/form-data"屬性。
  3. cache設(shè)置為false，上傳文件不需要緩存。
  4. contentType設(shè)置為false。因?yàn)槭怯?lt;form>表單構(gòu)造的FormData對象，且已經(jīng)聲明了屬性enctype="multipart/form-data"，所以這里設(shè)置為false。

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

html代碼如下：

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

JavaScript實(shí)現(xiàn)如下：

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()的第二個(gè)參數(shù)應(yīng)是文件對象，即$('#file')[0].files[0]。contentType也要設(shè)置為false。
  • 從代碼$('#file')[0].files[0]中可以看到一個(gè)<input type="file">標(biāo)簽?zāi)軌蛏蟼鞫鄠€(gè)文件，只需要在<input type="file">里添加multiple或multiple="multiple"屬性。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論