資訊專欄INFORMATION COLUMN
摘要：客戶端直接訪問用戶計(jì)算機(jī)的文件以前在表單添加了字段是為給開發(fā)提供安全的方式以便在客戶端更好訪問用戶的文件字段的基礎(chǔ)上加了一些直接訪問文件信息的接口集合與類型讀取文件的數(shù)據(jù)集合本地文件的名稱文件的字節(jié)大小字符文件的類型文件上次修改的時(shí)間實(shí)現(xiàn)
file API
客戶端直接訪問用戶計(jì)算機(jī)的文件,2000以前,在表單添加了字段. file API是為給web開發(fā)提供安全的方式,以便在客戶端更好訪問用戶的文件,字段的基礎(chǔ)上加 了一些直接訪問文件信息的接口-files集合.與fileReader類型讀取文件的數(shù)據(jù).files集合
name: 本地文件的名稱 size: 文件的字節(jié)大小 type: 字符、文件的MIME類型 lastModifiedDate: 文件上次修改的時(shí)間(chrome實(shí)現(xiàn)了這屬性)fileReader類型
readAsText(file, encoding): 以純文本的方式讀取文件.
readAsDataURL(file): 讀取文件并以URL的形式保存在result屬性中.
readAsBinaryString(file): 讀取文件并將一個(gè)字符串將保存在result屬性中,一個(gè)字符
為一個(gè)字節(jié).
readAsArrayBuffer(file): 讀取文件并將一個(gè)包含文件內(nèi)容的ArrayBuffer保存在
result屬性中.
(file-文件集合; encoding-編碼類型)
事件
由于數(shù)據(jù)是異步讀取.因此fileReader提供了幾種事件.
progress事件: 每～50ms,便觸發(fā)一次.
error事件: 但文件無法讀取就會(huì)觸發(fā),有個(gè)屬性error.code屬性.1表示未找到文件,2表示
安全性錯(cuò)誤,3表示讀取中斷,4表示文件不可讀,5表示編碼錯(cuò)誤.
load事件: 觸發(fā)但文件完整讀取后.
中斷了還會(huì)觸發(fā)abort事件,在load、error事件后還會(huì)觸發(fā)loadend事件.
栗子
當(dāng)用戶上傳完圖片之后,可在頁面立即顯示.
//html
//js
function showFileImg(ele, dist){
const filesList = document.querySelector(ele);
const output = document.querySelector(dist);
filesList.addEventListener("change", function(event) {
//實(shí)例fileReader對象
const reader = new FileReader();
//獲取文件集合
let files = event.target.files[0];
if(/image/.test(files.type)){
//讀取文件并通過URL類保存在result里
reader.readAsDataURL(files);
//事件
reader.onload = function(){
//獲得圖片數(shù)據(jù)并插進(jìn)顯示節(jié)點(diǎn)
let html = ""
i++;
}
output.innerHTML = info;
}
}
droptarget.addEventListener("dragenter", handleEvent);
droptarget.addEventListener("dragover", handleEvent);
droptarget.addEventListener("drop", handleEvent);
}
dropFile();
使用XHR上傳文件
//html
//js
function xhrFile(){
const file = document.querySelector("#file");
const sendFile = document.querySelector("#sendFile");
//文件信息
let files;
//獲得文件信息
function getFileInfo(event){
let files = event.target.files[0];
};
//發(fā)送xhr
function sendFileXhr(event){
//實(shí)例對象
let data = new FormData();
let i = 0;
let len = files.length;
//遍歷文件信息
while(i < len){
data.append("file" + i, files[i]);
i++;
}
//實(shí)例請求對象
let xhr = new XMLHttpRequest();
xhr.open("post", "......php", true);
//請求成功打印放回信息
xhr.onreadystatechange = function() {
if(xhr.readystate === 4){
alert(xhr.responseText);
}
}
xhr.send(data);
};
}
xhrFiles()
對象formData可通過鍵值模擬一系列的表單,通過xhr的send提交數(shù)據(jù).
formdata appendnew FormData(form? : HTMLFormElement);
給這對象加鍵值
append(name, value, filename);
name: 字段名稱
value: 字段數(shù)值
filename: 文件的文件名(可選).
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/82926.html
摘要：客戶端直接訪問用戶計(jì)算機(jī)的文件以前在表單添加了字段是為給開發(fā)提供安全的方式以便在客戶端更好訪問用戶的文件字段的基礎(chǔ)上加了一些直接訪問文件信息的接口集合與類型讀取文件的數(shù)據(jù)集合本地文件的名稱文件的字節(jié)大小字符文件的類型文件上次修改的時(shí)間實(shí)現(xiàn) file API 客戶端直接訪問用戶計(jì)算機(jī)的文件,2000以前,在表單添加了字段. file API是為給web開發(fā)提供安全的方式,以便...
摘要：選擇文件談到文件上傳，不得不提，中文名叫表單。當(dāng)需要使用回調(diào)函數(shù)來處理上傳完成后后端返回的數(shù)據(jù)時(shí)，需要和后端預(yù)先達(dá)成約定，如，回調(diào)函數(shù)名，參數(shù)列表，等等。后端可以根據(jù)邊界的檢驗(yàn)，識別上傳的文件，讀取元數(shù)據(jù)中的文件屬性，從而為驗(yàn)證提供數(shù)據(jù)。 引子 其實(shí)很早就開始醞釀這一篇了，無奈總是發(fā)現(xiàn)有缺漏的地方，遂努力惡補(bǔ)前端+后端+底層相關(guān)知識。今天終于可以發(fā)表了。 --跟生孩子一樣啊。 選擇文...
摘要：你可以通過在應(yīng)用程序上下文中添加一個(gè)解析器來啟用的處理。當(dāng)?shù)臋z測到一個(gè)請求時(shí)，它會(huì)激活你聲明好的解析器，然后把這個(gè)解析器轉(zhuǎn)交給請求。解析器會(huì)把當(dāng)前的扭曲為一個(gè)支持文件上傳的。首先，創(chuàng)建一個(gè)帶有的表單，這樣用戶就可以通過這個(gè)表單上傳文件了。 ??最近家里的網(wǎng)出現(xiàn)了莫名其妙的問題，連不上碼云了，所以把示例遷到了 github 上。本示例見這個(gè)項(xiàng)目的 master 分支的 ZestMulti...
摘要：在做時(shí)，不可避免地要上傳一些文件，最常用到的就是圖片。提供電子郵件服務(wù)的站點(diǎn)，除了圖片還需要上傳文檔等其他類型文件的功能。當(dāng)點(diǎn)擊所看到的按鈕時(shí)，實(shí)際點(diǎn)擊的是原生上傳控件，這樣一來就觸發(fā)了瀏覽器默認(rèn)行為，即打開選擇文件對話框。 在做 Web App 時(shí)，不可避免地要上傳一些文件，最常用到的就是圖片。在線相冊及圖片收藏網(wǎng)站等以提供圖片存儲(chǔ)服務(wù)的站點(diǎn)自不用說，社交網(wǎng)絡(luò)的頭像、發(fā)布信息等都需要...
閱讀 1020·2021-10-27 14:15
閱讀 2775·2021-10-25 09:45
閱讀 1940·2021-09-02 09:45
閱讀 3366·2019-08-30 15:55
閱讀 1806·2019-08-29 16:05
閱讀 3202·2019-08-28 18:13
閱讀 3116·2019-08-26 13:58
閱讀 454·2019-08-26 12:01
