js 实现input file

2026-01-30 11:53:40JavaScript

实现文件上传的 input 元素

在 HTML 中，使用 <input type="file"> 可以创建一个文件上传控件。用户可以通过该控件选择本地文件进行上传。

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

监听文件选择事件

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

document.getElementById('fileInput').addEventListener('change', function(event) {
    const files = event.target.files;
    if (files.length > 0) {
        console.log('Selected file:', files[0]);
    }
});

获取文件信息

从事件对象中可以获取到用户选择的文件列表（FileList），每个文件都是一个 File 对象，包含以下属性：

name：文件名
size：文件大小（字节）
type：文件类型
lastModified：最后修改时间戳

const file = files[0];
console.log('File name:', file.name);
console.log('File size:', file.size, 'bytes');
console.log('File type:', file.type);
console.log('Last modified:', new Date(file.lastModified));

读取文件内容

可以使用 FileReader API 来读取文件内容，支持多种读取方式：

const reader = new FileReader();

// 读取为文本
reader.readAsText(file);
reader.onload = function() {
    console.log('File content:', reader.result);
};

// 读取为DataURL（Base64）
reader.readAsDataURL(file);
reader.onload = function() {
    console.log('DataURL:', reader.result);
};

// 读取为ArrayBuffer
reader.readAsArrayBuffer(file);
reader.onload = function() {
    console.log('ArrayBuffer:', reader.result);
};

多文件选择和限制

可以通过添加 multiple 属性允许选择多个文件，使用 accept 属性限制文件类型：

<input type="file" id="multiFileInput" multiple accept=".jpg,.png,.pdf">

document.getElementById('multiFileInput').addEventListener('change', function(event) {
    const files = event.target.files;
    Array.from(files).forEach(file => {
        console.log(file.name);
    });
});

自定义样式

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

<label for="fileInput" class="custom-file-upload">
    Choose File
</label>
<input type="file" id="fileInput" style="display:none">

.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
    background: #f0f0f0;
    border-radius: 4px;
}

文件上传示例

结合 FormData 可以实现文件上传功能：

const formData = new FormData();
formData.append('file', file);

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

拖放文件上传

除了传统的文件选择，还可以实现拖放上传功能：

<div id="dropArea">
    Drop files here
</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('Dropped files:', files);
});

文件预览

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

const reader = new FileReader();
reader.onload = function(e) {
    const preview = document.createElement('img');
    preview.src = e.target.result;
    document.body.appendChild(preview);
};
reader.readAsDataURL(file);

文件验证

可以在客户端对文件进行基本验证：

function validateFile(file) {
    const validTypes = ['image/jpeg', 'image/png'];
    const maxSize = 5 * 1024 * 1024; // 5MB

    if (!validTypes.includes(file.type)) {
        alert('Only JPG and PNG files are allowed');
        return false;
    }

    if (file.size > maxSize) {
        alert('File size exceeds 5MB limit');
        return false;
    }

    return true;
}

这些方法提供了从基础到进阶的文件输入处理方案，可以根据实际需求选择适合的实现方式。

js 实现input file