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);
        }
    });

需要注意：

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

使用FormData對(duì)象添加字段方式上傳文件

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)是文件對(duì)象，即$('#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"屬性。

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

您可能感興趣的文章:

相關(guān)文章

小議javascript 設(shè)計(jì)模式推薦
最近重新溫習(xí)了一次《javascript設(shè)計(jì)模式》，確實(shí)是一本好書(shū)，每次看都有不同的領(lǐng)悟，每次領(lǐng)悟到的都受益匪淺，無(wú)怪古圣人都說(shuō)學(xué)無(wú)止鏡了，僅以“加油，好嗎？”共勉！
2009-10-10
TypeScript接口interface的高級(jí)用法詳解
interface 是typescript核心內(nèi)容,用來(lái)定義規(guī)范,無(wú)論是函數(shù),數(shù)組或者對(duì)象,還是類(lèi)都可以用接口interface來(lái)進(jìn)行規(guī)范,而接口本身也是可以繼承和擴(kuò)展的,本文給大家詳細(xì)介紹了TypeScript interface的高級(jí)用法,需要的朋友可以參考下
2025-03-03
javascript實(shí)現(xiàn)瀑布流動(dòng)態(tài)加載圖片原理
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)瀑布流動(dòng)態(tài)加載圖片原理，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-08-08
javascript中的with語(yǔ)句學(xué)習(xí)筆記及用法
在本篇文章里小編給大家分享的是關(guān)于javascript中的with語(yǔ)句學(xué)習(xí)筆記及用法，有需要的朋友們可以學(xué)習(xí)下。
2020-02-02
ES6基礎(chǔ)之展開(kāi)語(yǔ)法(Spread syntax)
這篇文章主要介紹了ES6基礎(chǔ)之展開(kāi)語(yǔ)法(Spread syntax)，主要介紹了擴(kuò)展語(yǔ)法的使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-02-02
Array.prototype 的泛型應(yīng)用分析
Array.prototype 的泛型應(yīng)用分析，需要的朋友可以參考下。
2010-04-04
JS?加載性能Tree?Shaking優(yōu)化詳解
這篇文章主要為大家介紹了JS?加載性能Tree?Shaking優(yōu)化詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-11-11
JavaScript常用工具函數(shù)大全
這篇文章主要介紹了JavaScript常用工具函數(shù),匯總整理了各種JavaScript常用工具函數(shù),包括獲取、判斷、轉(zhuǎn)換、設(shè)置等相關(guān)功能函數(shù)的定義與使用方法,需要的朋友可以參考下
2020-05-05
一些常見(jiàn)的TypeScript面試題匯總
TS是強(qiáng)類(lèi)型的JS超集,支持ES6語(yǔ)法,支持面向?qū)ο缶幊痰母拍?如類(lèi)、接口、繼承、泛型等,下面這篇文章主要給大家介紹了關(guān)于一些常見(jiàn)的TypeScript面試題的相關(guān)資料,需要的朋友可以參考下
2024-09-09
JS獲取鼠標(biāo)選中的文字
下面是小編給大家分享的js獲取鼠標(biāo)選中的文字和js獲取鼠標(biāo)選中的值關(guān)鍵代碼，大家如果有需要可以參考下
2016-08-08