js 实现input file

2026-03-01 03:02:06JavaScript

实现文件上传的input元素

在HTML中创建一个文件上传输入框非常简单，使用<input type="file">即可实现基础功能。以下是基本实现方式：

<input type="file" id="fileInput">

监听文件选择事件

通过JavaScript可以监听用户选择文件的事件，获取文件信息：

document.getElementById('fileInput').addEventListener('change', function(event) {
    const files = event.target.files;
    console.log('选中的文件:', files);
});

获取文件详细信息

从事件对象中可以获取文件的名称、大小、类型等信息：

const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function(e) {
    const selectedFile = e.target.files[0];
    console.log('文件名:', selectedFile.name);
    console.log('文件大小:', selectedFile.size, 'bytes');
    console.log('文件类型:', selectedFile.type);
    console.log('最后修改时间:', selectedFile.lastModified);
});

限制文件类型

可以通过accept属性限制用户只能选择特定类型的文件：

<input type="file" accept=".jpg,.jpeg,.png,.pdf">

或者使用MIME类型限制：

js 实现input file

<input type="file" accept="image/*">

多文件选择

添加multiple属性允许用户选择多个文件：

<input type="file" multiple>

处理多个文件时需要遍历files数组：

fileInput.addEventListener('change', function(e) {
    Array.from(e.target.files).forEach(file => {
        console.log(file.name);
    });
});

文件预览（图片）

对于图片文件，可以使用FileReader实现预览功能：

js 实现input file

const fileInput = document.getElementById('fileInput');
const preview = document.getElementById('preview');

fileInput.addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (!file.type.match('image.*')) return;

    const reader = new FileReader();
    reader.onload = function(e) {
        preview.src = e.target.result;
    };
    reader.readAsDataURL(file);
});

自定义样式

原生的文件输入框样式有限，可以通过以下方式实现自定义样式：

<label class="custom-file-upload">
    <input type="file"/>
    选择文件
</label>

.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}
input[type="file"] {
    display: none;
}

文件上传到服务器

使用FormData对象和fetch API可以将文件上传到服务器：

const formData = new FormData();
formData.append('file', fileInput.files[0]);

fetch('/upload', {
    method: 'POST',
    body: formData
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

清除已选文件

通过重置input的值可以清除已选择的文件：

fileInput.value = '';

拖放文件上传

除了点击选择文件，还可以实现拖放功能：

<div id="dropArea">
    拖放文件到这里
</div>

const dropArea = document.getElementById('dropArea');

dropArea.addEventListener('dragover', (e) => {
    e.preventDefault();
    dropArea.classList.add('highlight');
});

dropArea.addEventListener('dragleave', () => {
    dropArea.classList.remove('highlight');
});

dropArea.addEventListener('drop', (e) => {
    e.preventDefault();
    dropArea.classList.remove('highlight');
    const files = e.dataTransfer.files;
    console.log(files);
});