❤️ 谢谢支持
喜欢的话别忘了 关注、点赞哦~。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
然后使用下面的代码发送请求:
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)