| 登录 注册 |
在 JavaScript 中，判断 <input type="file" /> 元素中选中的文件的大小和类型，可以通过访问 FileList 对象中的 File 对象来获取这些信息。
以下是详细的步骤和代码示例：
1. 获取文件输入框元素
首先，你需要获取到 <input type="file" /> 元素。通常是通过 id 或者其他选择器来获取。html
<input type="file" id="fileInput" />javascript
const fileInput = document.getElementById('fileInput');
2. 监听文件选择事件
当用户选择文件后，change 事件会被触发。你需要给文件输入框添加一个事件监听器来处理这个事件。javascript
fileInput.addEventListener('change', function(event) {
// 在这里处理文件信息
});
3. 获取选中的文件
在 change 事件的处理函数中，你可以通过 event.target.files 来访问一个 FileList 对象。这个 FileList 对象包含了用户选中的所有文件（即使只允许选择一个文件，它也是一个 FileList，只是长度为 0 或 1）。javascript
fileInput.addEventListener('change', function(event) {
const files = event.target.files;
// 检查是否选择了文件
if (files.length === 0) {
console.log("没有选择文件。");
return;
}
// 通常情况下，我们关心第一个文件，即使允许多个文件
const file = files[0];
// 现在可以访问 file 对象来获取大小和类型
});
4. 判断文件大小File 对象有一个 size 属性，它以字节（bytes）为单位表示文件的大小。
* 获取文件大小（字节）： file.size
* 转换为 KB、MB 等： 你可以根据需要进行转换。
* 1 KB = 1024 字节
* 1 MB = 1024 KB = 1024 * 1024 字节javascript
fileInput.addEventListener('change', function(event) {
const files = event.target.files;
if (files.length === 0) {
console.log("没有选择文件。");
return;
}
const file = files[0];
const fileSizeInBytes = file.size;
console.log(`文件大小：${fileSizeInBytes} 字节`);
// 转换为 KB
const fileSizeInKB = fileSizeInBytes / 1024;
console.log(`文件大小：${fileSizeInKB.toFixed(2)} KB`);
// 转换为 MB
const fileSizeInMB = fileSizeInBytes / (1024 * 1024);
console.log(`文件大小：${fileSizeInMB.toFixed(2)} MB`);
// 示例：限制文件大小不超过 2MB
const maxSizeInBytes = 2 * 1024 * 1024; // 2MB
if (fileSizeInBytes > maxSizeInBytes) {
console.error("文件大小超过限制！");
// 可以显示错误消息给用户，并清空文件选择
fileInput.value = ''; // 清空文件选择
return;
}
});
5. 判断文件类型File 对象有一个 type 属性，它表示文件的 MIME 类型（MIME type）。例如，”image/jpeg”、”application/pdf”、”text/plain” 等。
* 获取文件类型： file.typejavascript
fileInput.addEventListener('change', function(event) {
const files = event.target.files;
if (files.length === 0) {
console.log("没有选择文件。");
return;
}
const file = files[0];
const fileType = file.type;
console.log(`文件类型：${fileType}`);
// 示例：只允许上传图片文件
const allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
if (!allowedTypes.includes(fileType)) {
console.error("文件类型不支持！请上传图片文件。");
// 可以显示错误消息给用户，并清空文件选择
fileInput.value = ''; // 清空文件选择
return;
}
// 示例：更通用的图片类型判断
if (fileType.startsWith('image/')) {
console.log("这是一个图片文件。");
} else {
console.log("这不是一个图片文件。");
}
});
完整的示例代码：
HTML:html
<!DOCTYPE html>
<html>
<head>
<title>文件大小和类型判断</title>
</head>
<body>
<input type="file" id="fileInput" />
<p id="fileInfo"></p>
<script src="script.js"></script>
</body>
</html>
JavaScript (script.js):javascript
const fileInput = document.getElementById('fileInput');
const fileInfo = document.getElementById('fileInfo');
fileInput.addEventListener('change', function(event) {
const files = event.target.files;
if (files.length === 0) {
fileInfo.textContent = "没有选择文件。";
return;
}
const file = files[0];
const fileName = file.name;
const fileSizeInBytes = file.size;
const fileType = file.type;
// 文件大小格式化
let formattedFileSize = '';
if (fileSizeInBytes < 1024) {
formattedFileSize = fileSizeInBytes + ' B';
} else if (fileSizeInBytes < 1024 * 1024) {
formattedFileSize = (fileSizeInBytes / 1024).toFixed(2) + ' KB';
} else {
formattedFileSize = (fileSizeInBytes / (1024 * 1024)).toFixed(2) + ' MB';
}
let message = `
文件名：${fileName}<br>
文件大小：${formattedFileSize}<br>
文件类型：${fileType}
`;
// 示例：验证文件大小不超过 5MB
const maxSizeInBytes = 5 * 1024 * 1024; // 5MB
if (fileSizeInBytes > maxSizeInBytes) {
message += '<br><span style="color: red;">错误：文件大小超过 5MB！</span>';
fileInput.value = ''; // 清空文件选择
}
// 示例：验证文件类型为图片
const allowedImageTypes = ['image/jpeg', 'image/png', 'image/gif'];
if (!fileType.startsWith('image/')) {
message += '<br><span style="color: red;">错误：不支持的文件类型！请上传图片。</span>';
fileInput.value = ''; // 清空文件选择
}
fileInfo.innerHTML = message;
});
注意事项：
* File.type 可能为空： 对于某些文件类型，浏览器可能无法准确检测到 MIME 类型，此时 file.type 可能会为空字符串。如果需要更严格的文件类型验证，可以考虑结合文件名后缀进行判断，但需要注意这种方式不够健壮。
* 多文件上传： 如果 <input type="file" /> 元素设置了 multiple 属性，event.target.files 会包含用户选择的所有文件。你可以遍历 FileList 来处理每个文件。
* 安全性： JavaScript 只能获取文件的大小和类型信息，不能用于验证文件的实际内容或执行服务器端的安全检查。对于重要的文件上传，始终需要在服务器端进行严格的验证。
* 用户体验： 当文件不符合要求时，要给用户清晰的提示，并考虑清空文件选择 (fileInput.value = '')，避免用户误以为已成功上传。
通过以上方法，你就可以在 JavaScript 中有效地判断 <input type="file" /> 中选中文件的基本信息了。