jquery使用FormData實現(xiàn)異步上傳文件
更新時間：2018年10月25日 10:33:37 作者：Orange_J
這篇文章主要為大家詳細介紹了jquery使用FormData實現(xiàn)異步上傳文件，具有一定的參考價值，感興趣的小伙伴們可以參考一下
考慮一個常見的用戶上傳頭像的場景：
- 點擊按鈕，彈出文件選擇框
- 選中圖片并確認后直接上傳圖片
實現(xiàn)這個功能，需要使用<input>來添加文件，并實現(xiàn)上傳功能。傳統(tǒng)的上傳文件是將<input>放到<form>中提交，但在這個場景中并不存在form表單，只有一個input而已。那么應(yīng)該如何處理呢？
答案是可以使用FormData來實現(xiàn)文件的提交。
先看一下MDN對FormData的介紹：
XMLHttpRequest Level 2添加了一個新的接口FormData.利用FormData對象,我們可以通過JavaScript用一些鍵值對來模擬一系列表單控件,我們還可以使用XMLHttpRequest的send()方法來異步的提交這個”表單”.比起普通的ajax,使用FormData的最大優(yōu)點就是我們可以異步上傳一個二進制文件.
這樣一來，解決問題的思路就出來了：
- 每次選中文件并確認后，<input>會觸發(fā)change事件，在onchange事件處理函數(shù)中處理即可。
- 創(chuàng)建一個FormData對象，并將選中的文件追加進去。
- 使用Ajax發(fā)送這個FormData對象。
下面用一個Demo展示具體的代碼實現(xiàn)用FormData將文件發(fā)送到一個php：
<html>
<head>
<title>Upload</title>
<meta charset="utf-8">
</head>
<body>
<input id="file-input" type="file">
<script>
var input = document.getElementById('file-input');
input.onchange = function () {
var data = new FormData();
data.append('file', input.files[0]);
var request = new XMLHttpRequest();
request.open('POST', './upload.php');
request.send(data);
};
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
因公司需要做一個仿百度搜索框,并且?guī)alue值的, 網(wǎng)上找了下只有Text, 都沒帶Value的 所以做了個,代碼給予簡單的注釋，結(jié)構(gòu)很清晰，很容易看懂，感興趣的朋友可以了解下2013-01-01
這篇文章主要為大家介紹了jQuery編程動畫基本實現(xiàn)方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
基于jQuery的AJAX和JSON實現(xiàn)純html數(shù)據(jù)模板
jQuery內(nèi)置的AJAX功能，直接訪問后臺獲得JSON格式的數(shù)據(jù)，從而實現(xiàn)純html數(shù)據(jù)模板，下面主要給大家介紹實現(xiàn)代碼，感興趣的朋友一起看下吧2016-08-08
這篇文章主要介紹了解決jquery實現(xiàn)的radio重新選中的問題的方法和示例，十分的實用，有需要的小伙伴可以參考下。2015-07-07
解析Jquery中如何把一段html代碼動態(tài)寫入到DIV中(實例說明)
本篇文章是對在Jquery中把一段html代碼動態(tài)寫入到DIV中的實現(xiàn)方法進行了詳細的分析介紹，需要的朋友可以參考下2013-07-07
關(guān)于HTML5的data-*自定義屬性的總結(jié)
大家總是習(xí)慣使用HTML標(biāo)簽添加自定義屬性來存儲和操作數(shù)據(jù)，所以才在HTML5規(guī)范里增加了一個自定義data屬性，這樣使用更便捷，一起跟隨小編過來看看吧2018-05-05
這篇文章主要介紹了jQuery中事件對象e的事件冒泡用法,需要的朋友可以參考下2014-04-04
jQuery組件easyui對話框?qū)崿F(xiàn)代碼
這篇文章主要為大家詳細介紹了jQuery組件easyui對話框?qū)崿F(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
jquery基礎(chǔ)教程之deferred對象使用方法
jquery基礎(chǔ)教程之deferred對象使用方法2014-01-01
當(dāng)鼠標(biāo)停留在表頭邊框線上，接著拖動鼠標(biāo)，會在表格中出現(xiàn)一條隨鼠標(biāo)移動的豎線，最后放開鼠標(biāo)，表格列寬會被調(diào)整2014-09-09