js获取文件信息

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

document.getElementById('fileInput').addEventListener('change', function(event) {
    const files = event.target.files; // FileList对象
    for (let i = 0; i < files.length; i++) {
        const file = files[i];
        console.log('文件名:', file.name);
        console.log('文件大小:', file.size, '字节');
        console.log('文件类型:', file.type);
        console.log('最后修改时间:', file.lastModifiedDate);
    }
});

<div id="dropZone" style="width: 300px; height: 200px; border: 1px solid black;">拖放文件到这里</div>

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

dropZone.addEventListener('dragover', function(event) {
    event.preventDefault();
});

dropZone.addEventListener('drop', function(event) {
    event.preventDefault();
    const files = event.dataTransfer.files; // FileList对象
    for (let i = 0; i < files.length; i++) {
        const file = files[i];
        console.log('文件名:', file.name);
        console.log('文件大小:', file.size, '字节');
        console.log('文件类型:', file.type);
        console.log('最后修改时间:', file.lastModifiedDate);
    }
});

<input type="file" id="fileInput" accept="image/*">
<img id="preview" src="" alt="文件预览" style="max-width: 300px; max-height: 300px;">

document.getElementById('fileInput').addEventListener('change', function(event) {
    const file = event.target.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
            document.getElementById('preview').src = e.target.result;
        };
        reader.readAsDataURL(file);
    }
});