简单文件上传
文件上传的传统形式，是使用表单元素 file：
<input type="file" id="file-uploader">
你可以添加 change 事件***读取 event.target.files 文件对象。
const fileUploader = document.getElementById('file-uploader');
fileUploader.addEventListener('change', (e) => {
const files = e.target.files
console.log('files', files)
})
多个文件上传
使用 multiple 属性
<input type="file" id="file-uploader" multiple />
文件元数据
在成功上传文件内容后，您可能需要显示该文件内容。对于图片，如果我们在上传后不立即将上传的图片显示给用户，则会感到困惑。
每当上传文件时，File 对象都会包含元数据信息，如文件名称、大小、上次更新时间、类型等。此信息可用于进一步验证和决策。
const fileUploader = document.getElementById('file-uploader')
// 侦听更改事件并读取元数据
fileUploader.addEventListener('change', (e) => {
// 获取文件列表数组
const files = e.target.files
// 循环浏览文件并获取元数据
for (const file of files) {
const name = file.name
const type = file.type ? file.type: 'NA'
const size = file.size
const lastModified = file.lastModified
console.log({ file, name, type, size, lastModified })
}
})
管理文件内容，实现图片预览
使用 FileReader 对象将文件转换为二进制字符串。然后添加 load 事件侦听器，以获得成功文件上传的二进制字符串。
// 获取 FileReader 的实例
const reader = new FileReader()
fileUploader.addEventListener('change', (e) => {
const files = e.target.files
const file = files[0]
// 上传后获取文件对象，以 URL 二进制字符串的形式读取数据
reader.readAsDataURL(file)
// 加载后，对字符串进行处理
reader.addEventListener('load', (e) => {
// 在这里，我们创建一个图像标签，并添加一个图像到它。
const img = document.createElement('img')
imageGrid.appendChild(img)
img.src = e.target.result
img.width = 100
img.alt = file.name
})
})
accept 属性
使用 accept 属性来限制要上传的文件类型。
<input type="file" id="file-uploader" accept=".jpg, .png" multiple>
上面示例中，文件浏览器将只允许具有 jpg 和 png 的文件类型。
注意，在这种情况下，文件浏览器会自动将文件选择类型设置为 "自定义"，而不是 "全部"。但是，如果需要，可以随时将其更改回所有文件。
验证文件大小
我们读取了文件的大小元数据，可以使用它进行文件大小验证。您可以允许用户上传高达 1MB 的图像文件。
// 文件上载更改事件的侦听器
fileUploader.addEventListener('change', (event) => {
// Read the file size
const file = event.target.files[0];
const size = file.size;
let msg = '';
// 检查文件大小是否大于 1MB 并准备消息。
if (size > 1024 * 1024) {
msg = `<span style="color:red;">允许的文件大小为 1MB。您尝试上载的文件属于${returnFileSize(size)}</span>`;
} else {
msg = `<span style="color:green;"> ${returnFileSize(size)} 文件已成功上载。 </span>`;
}
// 向用户显示消息
feedback.innerHTML = msg;
});
显示文件上传进度
更好的可用性是让用户了解文件上传进度。XMLHttpRequest 第二版还定义了一个 progress事件，可以用来制作进度条。
先在页面中放置一个 progress 标签
<label id="progress-label" for="progress"></label>
<progress id="progress" value="0" max="100" value="0">0</progress>
定义 progress 事件的回调函数
const reader = new FileReader();
reader.addEventListener('progress', (e) => {
if (e.loaded && e.total) {
// 计算完成百分比
const percent = (e.loaded / e.total) * 100;
// 将值设置为进度组件
progress.value = percent;
}
});
上传目录
有一个非标准属性 webkitdirectory，使我们能够上传整个目录。
虽然最初仅针对基于 WebKit 的浏览器实施，但 WebkitDirectory 在微软 Edge 以及 Firefox 50 及以后也可用。然而，即使它有相对广泛的支持，它仍然不是标准的，不应该使用，除非你别无选择。
<input type="file" id="file-uploader" webkitdirectory />
拖放上传
主要的 JS 如下：
const dropZone = document.getElementById('drop-zone');
const content = document.getElementById('content');
dropZone.addEventListener('dragover', event => {
event.stopPropagation();
event.preventDefault();
event.dataTransfer.dropEffect = 'copy';
});
dropZone.addEventListener('drop', event => {
// 获取文件
const files = event.dataTransfer.files;
// ..
});
用对象处理文件
使用 URL.createObjectURL() 方法从文件创建一个唯一的 URL。使用 URL.revokeObjectURL() 方法释放它。
DOM 和
URL.createObjectURL()和URL.revokeObjectURL()方法允许您创建简单的 URL 字符串，可用于引用任何可以使用 DOM 文件对象引用的数据，包括用户计算机上的本地文件。
示例：
<div>
<h1>Use Object URL</h1>
<input type="file" id="file-uploader" accept=".jpg, .jpeg, .png" >
<div id="image-grid"></div>
</div>
const fileUploader = document.getElementById('file-uploader');
const reader = new FileReader();
const imageGrid = document.getElementById('image-grid');
fileUploader.addEventListener('change', (event) => {
const files = event.target.files;
const file = files[0];
const img = document.createElement('img');
imageGrid.appendChild(img);
img.src = URL.createObjectURL(file);
img.alt = file.name;
});
京公网安备 11010502036488号