从输入类型文件元素中获取实际文件可以通过以下步骤实现:
<input>
元素创建一个文件上传表单,设置type
属性为"file",并添加一个id
属性用于后续操作。<input type="file" id="fileInput">
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', handleFileSelect, false);
handleFileSelect
中,可以通过files
属性获取用户选择的文件列表。由于文件输入元素支持多文件选择,因此需要遍历文件列表来处理每个文件。function handleFileSelect(event) {
const files = event.target.files;
for (let i = 0; i < files.length; i++) {
const file = files[i];
// 处理文件
console.log(file.name); // 输出文件名
console.log(file.type); // 输出文件类型
console.log(file.size); // 输出文件大小
console.log(file.lastModified); // 输出文件最后修改时间
// ...
}
}
function handleFileSelect(event) {
const files = event.target.files;
for (let i = 0; i < files.length; i++) {
const file = files[i];
const reader = new FileReader();
reader.onload = function(e) {
const contents = e.target.result;
console.log(contents); // 输出文件内容
};
reader.readAsText(file);
}
}
这样,通过以上步骤,就可以从输入类型文件元素中获取实际文件,并进行相应的处理操作。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云