資訊專欄INFORMATION COLUMN
摘要：簡單的上傳例子先在里面準(zhǔn)便好標(biāo)簽添加上傳文件上傳文件解讀步驟的對(duì)象獲取，對(duì)象生成使用的事件來獲取，文件的內(nèi)容使用的方法來添加一個(gè)新值到里面來使用的的方法來上傳文件原理說明對(duì)象其實(shí)不止是可以用來上傳文件，如同其名，可以模擬一系列表單控件的
FormData 簡單的上傳例子
/*
先在 html 里面準(zhǔn)便好 標(biāo)簽
*/
var fileInput = document.querySelector(".file-input");
var formData = new FormData();
//添加 formData 上傳文件
fileInput.onchange = function(e){
formData.append("fileIn", this.value);
}
//上傳文件
var request = new XMLHttpRequest();
request.open("POST", "/ajax.php");
request.send(formData);
解讀步驟
fileInput 的 dom 對(duì)象獲取， FormData 對(duì)象生成；
使用 fileInput 的 onchange 事件來獲取，文件的內(nèi)容；
使用 formData 的 append 方法來添加一個(gè)新值到 formData 里面來；
使用 XMLHttpRequest 的 send 的方法來上傳文件；
原理說明FormData 對(duì)象其實(shí)不止是可以用來上傳文件，如同其名，可以模擬一系列表單控件的鍵值對(duì)，然后用于 XMLHttpRequest 的提交，其最大的優(yōu)點(diǎn)就是可以異步上傳一個(gè)二進(jìn)制文件；
FormData 是無法讀取文件的，其核心就是通過 append()，將文件變成新增字段，來上傳文件；
FileReader 簡單的讀取文件例子
/*
先在 html 里面準(zhǔn)便好 標(biāo)簽
*/
var fileInput = document.querySelector(".file-input");
// 創(chuàng)建 FileReader 對(duì)象
var fileReader = new FileReader();
fileInput.onchange = function(e){
// 獲取原聲 File 對(duì)象
var file = event.target.files[0];
// 以二進(jìn)制讀取文件對(duì)象
fileReader.readAsArrayBuffer(file);
//fileReader.readAsDataURL(file); // 以data:URL 格式的字符串以表示讀取文件的內(nèi)容
//fileReader.readAsText(file); //以字符串形式表示讀取到的文件內(nèi)容
}
// 讀取操作完成后
fileReader.onload = function (e) {
console.log(e)
}
解讀步驟
創(chuàng)建 FileReader 對(duì)象；
通過 fileInput 的 dom 對(duì)象 onchange 的方法， 獲取原始 File 對(duì)象；
通過 FileReader 中其中一種讀取方式，讀取原始 File 對(duì)象；
通過 FileReader 的 onload 方法獲取來繼續(xù)讀取完成后的操作；
原理說明一般來說，讀取文件應(yīng)用場(chǎng)景應(yīng)該是需要作斷點(diǎn)續(xù)存的時(shí)候，或者想要預(yù)覽上傳的圖片；
預(yù)覽圖片例子
var fileInput = document.querySelector(".file-input");
var imgSrc = document.querySelector(".img")
// 創(chuàng)建 FileReader 對(duì)象
var fileReader = new FileReader();
fileInput.onchange = function(e){
// 獲取原聲 File 對(duì)象
var file = event.target.files[0];
fileReader.readAsDataURL(file); // 以data:URL 格式的字符串以表示讀取文件的內(nèi)容
}
// 讀取操作完成后
fileReader.onload = function (e) {
console.log(e)
imgSrc.src = e.target.result
}
由于本人使用 FileReader 得并不多，所以這里不作詳細(xì)討論了，有興趣的同學(xué)可以，直接去看MDN文檔
總結(jié)雖然上傳文件很早就嘗試過了，但是當(dāng)時(shí)理解并不是很深入，而且加上最近幾次在這方面知識(shí)的打擊，有點(diǎn)不太能認(rèn)了；
感謝 白白 的幾次指導(dǎo)，（指導(dǎo)了好幾次，本人還是忘了)
感謝 MDN 提供的文檔給予我一定的靈感
FormData 對(duì)象的使用
FileReader
感謝閱讀，歡迎指出文章的不足之處，以及討論更多的代碼優(yōu)化
原文站點(diǎn) 時(shí)之物語
原文鏈接 Ajax 之文件上傳
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/107928.html
摘要：雜言之前朋友說的不刷新上傳文件。最暴力的解決方案就是上網(wǎng)上搜各種庫，附帶多圖上傳，預(yù)覽，甚至是圖片處理等特技。但是是個(gè)好東西，他提供了，可以幫助我們拼湊參數(shù)，乃至文件資源。測(cè)試上傳可以看到請(qǐng)求到了看下，就可以看到返回的相關(guān)信息了。 雜言 ??之前朋友說的不刷新上傳文件。最暴力的解決方案就是上網(wǎng)上搜各種JS庫，附帶多圖上傳，預(yù)覽，甚至是圖片處理等特技。那么如果不接觸第三方的庫，可不可以...
摘要：第三種，使用格式，即在中請(qǐng)求參數(shù)處理跨域問題當(dāng)然請(qǐng)求方式只能是。最后發(fā)現(xiàn)有網(wǎng)友說版本不穩(wěn)定引起的，于是把百度地圖回退到了，結(jié)果還真是可以了。請(qǐng)問在移動(dòng)端頁面中播放優(yōu)酷里面的視頻，怎樣實(shí)現(xiàn) 1.web掃碼登錄怎么實(shí)現(xiàn)，思路 步驟 WEB平臺(tái) 手機(jī) 第1步 生成二維碼 第2步 （ajax監(jiān)控后臺(tái)） 掃碼 第3步 ...
摘要：文章首發(fā)于藍(lán)鍋鍋博客主要是用到的接口，既然是的，所支持的瀏覽器我就不多說啦，老生常談的問題了，遠(yuǎn)離，珍惜生命。目錄路徑為目錄路徑為文章首發(fā)于藍(lán)鍋鍋博客，歡迎交流，共同進(jìn)步。 我們?cè)陂_發(fā)系統(tǒng)時(shí)，處理圖片上傳是不可避免的，例如使用thinkphp的肯定很熟悉import(@.ORG.UploadFile);的上傳方式，今天我們來講一個(gè)使用html5 base64上傳圖片的方法。文章首發(fā)于藍(lán)...
閱讀 1774·2021-11-12 10:36
閱讀 1675·2021-11-12 10:36
閱讀 3510·2021-11-02 14:46
閱讀 3908·2019-08-30 15:56
閱讀 3729·2019-08-30 15:55
閱讀 1528·2019-08-30 15:44
閱讀 1111·2019-08-30 14:00
閱讀 2781·2019-08-29 18:41
