2024年最新FormData，File，FileReader 对象 整理自mdn，2024年最新大厂前端面试问什么

❤️ 谢谢支持

喜欢的话别忘了 关注、点赞哦~。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

然后使用下面的代码发送请求：

var form = document.forms.namedItem(“fileinfo”);

form.addEventListener(‘submit’, function(ev) {

var oOutput = document.querySelector(“div”),

oData = new FormData(form);

oData.append(“CustomField”, “This is some extra data”);

var oReq = new XMLHttpRequest();

oReq.open(“POST”, “stash.php”, true);

oReq.onload = function(oEvent) {

if (oReq.status == 200) {

oOutput.innerHTML = “Uploaded!”;

} else {

oOutput.innerHTML = “Error " + oReq.status + " occurred when trying to upload your file.<br />”;

}

};

oReq.send(oData);

ev.preventDefault();

}, false);

file

下面的一行代码演示如何获取到一个FileList对象中的第一个文件(File 对象):

var file = document.getElementById(‘fileItem’).files[0];

这个例子迭代了用户通过一个input元素选择的多个文件:

// fileInput是一个 HTML input 元素:

var fileInput = document.getElementById(“myfileinput”);

// files 是一个 FileList 对象(类似于NodeList对象)

var files = fileInput.files;

var file;

//遍历所有文件

for (var i = 0; i < files.length; i++) {

// 取得一个文件

file = files.item(i);

// 这样也行

file = files[i];

// 取得文件名

alert(file.name);

}

下面是一个更完整的例子.

// multiple属性可以让用户能选择多个文件

FileReader

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

所有type属性(attribute)为file的 元素都有一个files属性(property),用来存储用户所选择的文件. 例如:<input id="fileItem" type="file">

// 一个文件上传的回调

function onChange(event) {

var file = event.target.files[0];

文末

篇幅有限没有列举更多的前端面试题，小编把整理的前端大厂面试题PDF分享出来，一共有269页

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

/img_convert/04273c2f50e58b6822663c5b2f379206.png)

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】