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

更新時間：2017年08月10日 10:45:13 作者：yangzhanmei

本篇文章主要介紹了JavaScript使用Ajax上傳文件的示例代碼，詳細的介紹了兩種上傳方式，感興趣的小伙伴可以了解一下

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

實現(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>

此時的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設置為false。因為data值是FormData對象，不需要對數(shù)據(jù)做處理。
<form>標簽添加enctype="multipart/form-data"屬性。
cache設置為false，上傳文件不需要緩存。
contentType設置為false。因為是由<form>表單構造的FormData對象，且已經(jīng)聲明了屬性enctype="multipart/form-data"，所以這里設置為false。

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

html代碼如下：

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

JavaScript實現(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()的第二個參數(shù)應是文件對象，即$('#file')[0].files[0]。contentType也要設置為false。
從代碼$('#file')[0].files[0]中可以看到一個<input type="file">標簽能夠上傳多個文件，只需要在<input type="file">里添加multiple或multiple="multiple"屬性。

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

您可能感興趣的文章:

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