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