使用 <input type="file"> 实现文件选择框，添加 multiple 属性支持多文件选择，通过 accept 属性限制文件类型，如 accept="image/*" 或 accept=".png,.jpg"；2. 利用 javascript 的 formdata 和 fetch api 处理文件上传，结合 filereader api 实现图片预览；3. 通过隐藏默认输入框并绑定点击事件到自定义按钮来自定义样式；4. 在客户端使用 file.size 检查文件大小是否超限，但必须在服务器端进行二次验证以确保安全。
HTML 表单中的文件选择框，允许用户从本地文件系统中选择一个或多个文件，以便上传到服务器。实现的关键在于 <input type="file"> 标签。
文件选择器实现
<input type="file"> 是 HTML 中创建文件选择框的核心。 默认情况下，它允许用户选择单个文件。
立即学习“前端免费学习笔记（深入）”；
<form> <label for="fileUpload">选择文件:</label> <input type="file" id="fileUpload" name="fileUpload"> </form>
多文件选择:
若要允许用户选择多个文件，需要添加 multiple 属性。
<form> <label for="fileUploadMultiple">选择多个文件:</label> <input type="file" id="fileUploadMultiple" name="fileUploadMultiple" multiple> </form>
限制文件类型:
accept 属性可以用来限制用户可以选择的文件类型。 例如，只允许选择图片文件：
<form> <label for="imageUpload">选择图片:</label> <input type="file" id="imageUpload" name="imageUpload" accept="image/*"> </form>
accept 属性可以使用 MIME 类型或文件扩展名。 例如，accept="image/png, image/jpeg" 或 accept=".png, .jpg, .jpeg"。
JavaScript 处理:
虽然 HTML 提供了文件选择框，但通常需要 JavaScript 来处理用户选择的文件。 例如，可以在表单提交之前预览图片，或者上传文件到服务器。
<form id="uploadForm">
<label for="fileInput">选择文件:</label>
<input type="file" id="fileInput" name="fileInput">
<button type="submit">上传</button>
</form>
<script>
const form = document.getElementById('uploadForm');
form.addEventListener('submit', function(event) {
event.preventDefault(); // 阻止默认的表单提交行为
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0]; // 获取选择的第一个文件
if (file) {
// 创建 FormData 对象，用于上传文件
const formData = new FormData();
formData.append('file', file);
// 使用 fetch API 上传文件
fetch('/upload', { // 替换为你的上传 API 地址
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
console.log('上传成功:', data);
})
.catch(error => {
console.error('上传失败:', error);
});
} else {
console.log('请选择一个文件');
}
});
</script>安全性考虑:
需要注意，客户端的文件类型限制可以通过修改文件扩展名绕过。 因此，服务器端必须进行严格的文件类型验证和安全检查，以防止恶意文件上传。
如何自定义文件选择按钮的样式？
默认的文件选择按钮样式比较简陋，不同浏览器之间也存在差异。 自定义样式通常涉及隐藏默认的 <input type="file"> 元素，并使用一个自定义的按钮来触发文件选择对话框。
<style>
.custom-file-upload {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}
#fileElem {
display: none; /* 隐藏文件选择框 */
}
</style>
<label for="fileElem" class="custom-file-upload">
选择文件
</label>
<input type="file" id="fileElem" accept="image/*" multiple>
<script>
const fileElem = document.getElementById("fileElem");
const customButton = document.querySelector('.custom-file-upload');
customButton.addEventListener('click', function(event) {
fileElem.click(); // 触发文件选择框的点击事件
event.preventDefault(); // 阻止默认行为
});
fileElem.addEventListener("change", handleFiles, false);
function handleFiles() {
const fileList = this.files;
console.log("Selected files:", fileList);
// 在这里处理选择的文件
}
</script>这个例子中，.custom-file-upload 是自定义的按钮样式，#fileElem 是隐藏的文件选择框。 点击自定义按钮会触发文件选择框的点击事件，从而打开文件选择对话框。 handleFiles 函数处理用户选择的文件。
如何预览用户选择的图片？
在用户选择图片后，可以立即预览，提供更好的用户体验。 这需要使用 FileReader API。
<input type="file" id="imageInput" accept="image/*">
<img id="imagePreview" src="#" alt="预览" style="max-width: 200px; max-height: 200px; display: none;">
<script>
const imageInput = document.getElementById('imageInput');
const imagePreview = document.getElementById('imagePreview');
imageInput.addEventListener('change', function() {
const file = this.files[0];
if (file) {
const reader = new FileReader();
reader.addEventListener('load', function() {
imagePreview.src = reader.result;
imagePreview.style.display = 'block'; // 显示预览图片
}, false);
reader.readAsDataURL(file);
} else {
imagePreview.src = '#';
imagePreview.style.display = 'none'; // 隐藏预览图片
}
});
</script>这段代码监听 imageInput 的 change 事件。 当用户选择文件后，创建一个 FileReader 对象，使用 readAsDataURL 方法读取文件内容，并将其设置为 imagePreview 的 src 属性。
如何限制上传文件的大小？
在客户端限制文件大小可以减少不必要的服务器负载。 但请注意，客户端的限制可以被绕过，因此服务器端也必须进行文件大小验证。
<input type="file" id="fileInput">
<script>
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function() {
const file = this.files[0];
const maxSizeInBytes = 2 * 1024 * 1024; // 2MB
if (file && file.size > maxSizeInBytes) {
alert('文件大小超过 2MB，请重新选择');
this.value = ''; // 清空文件选择
}
});
</script>这段代码检查用户选择的文件大小是否超过 2MB。 如果超过，则显示警告信息，并清空文件选择。 file.size 属性返回文件大小，单位是字节。
