HTML表单如何实现文件预览？怎样在上传前显示图片缩略图？

change

<div>

<input type="file" id="fileInput" accept="image/*" multiple>
<div id="previewContainer" style="display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px;"></div>

readAsDataURL

document.getElementById('fileInput').addEventListener('change', function(event) {
    const previewContainer = document.getElementById('previewContainer');
    // 清空之前的预览，这样每次选择新文件时不会累加
    previewContainer.innerHTML = ''; 

    if (this.files && this.files.length > 0) {
        // 遍历所有选中的文件
        Array.from(this.files).forEach(file => {
            // 确保是图片类型，当然你也可以根据需求处理其他类型
            if (file.type.startsWith('image/')) {
                const imgWrapper = document.createElement('div');
                imgWrapper.style.position = 'relative';
                imgWrapper.style.width = '100px';
                imgWrapper.style.height = '100px';
                imgWrapper.style.border = '1px solid #ddd';
                imgWrapper.style.overflow = 'hidden';

                const img = document.createElement('img');
                img.src = URL.createObjectURL(file); // 创建一个临时的URL
                img.alt = file.name;
                img.style.width = '100%';
                img.style.height = '100%';
                img.style.objectFit = 'cover'; // 保持图片比例，填充容器

                const removeBtn = document.createElement('button');
                removeBtn.textContent = 'X';
                removeBtn.style.position = 'absolute';
                removeBtn.style.top = '2px';
                removeBtn.style.right = '2px';
                removeBtn.style.background = 'rgba(0,0,0,0.5)';
                removeBtn.style.color = 'white';
                removeBtn.style.border = 'none';
                removeBtn.style.borderRadius = '50%';
                removeBtn.style.cursor = 'pointer';
                removeBtn.style.width = '20px';
                removeBtn.style.height = '20px';
                removeBtn.style.lineHeight = '20px';
                removeBtn.style.padding = '0';
                removeBtn.style.fontSize = '12px';

                removeBtn.onclick = function() {
                    // 移除预览元素
                    previewContainer.removeChild(imgWrapper);
                    // 释放URL资源，这很重要，否则会造成内存泄漏
                    URL.revokeObjectURL(img.src); 
                    // 这里如果需要，还可以更新文件列表，但那会稍微复杂一点，需要维护一个内部文件数组
                };

                img.onload = () => {
                    // 图片加载完成后，可以释放掉临时的URL，节省内存
                    // 但对于简单的预览，通常等到元素从DOM移除时再统一释放会更方便
                    // URL.revokeObjectURL(img.src); // 这样写会立即释放，可能导致图片显示不全，所以通常不在这里立即释放
                };

                imgWrapper.appendChild(img);
                imgWrapper.appendChild(removeBtn);
                previewContainer.appendChild(imgWrapper);
            } else {
                // 对于非图片文件，可以显示文件名或者一个通用图标
                const fileInfo = document.createElement('p');
                fileInfo.textContent = `文件: ${file.name} (${file.type})`;
                previewContainer.appendChild(fileInfo);
            }
        });
    }
});

src

blob:http://example.com/some-guid

drawImage

input type="file"

multiple

<input type="file" id="multiFileInput" accept="image/*" multiple>
<div id="multiPreviewContainer" style="display: flex; flex-wrap: wrap; gap: 15px; margin-top: 20px;"></div>

FileList

document.getElementById('multiFileInput').addEventListener('change', function(event) {
    const multiPreviewContainer = document.getElementById('multiPreviewContainer');
    // 每次选择新文件时，先清空旧的预览，避免混淆
    multiPreviewContainer.innerHTML = ''; 

    if (this.files && this.files.length > 0) {
        // `this.files`是一个FileList对象，它不是真正的数组，但可以用Array.from()或for...of遍历
        Array.from(this.files).forEach(file => {
            if (file.type.startsWith('image/')) {
                const imgWrapper = document.createElement('div');
                imgWrapper.className = 'preview-item'; // 添加一个类名方便CSS控制
                imgWrapper.style.position = 'relative';
                imgWrapper.style.width = '120px';
                imgWrapper.style.height = '120px';
                imgWrapper.style.border = '1px solid #eee';
                imgWrapper.style.borderRadius = '4px';
                imgWrapper.style.overflow = 'hidden';
                imgWrapper.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';

                const img = document.createElement('img');
                img.src = URL.createObjectURL(file);
                img.alt = file.name;
                img.style.width = '100%';
                img.style.height = '100%';
                img.style.objectFit = 'cover';

                const fileNameSpan = document.createElement('span');
                fileNameSpan.textContent = file.name;
                fileNameSpan.style.position = 'absolute';
                fileNameSpan.style.bottom = '0';
                fileNameSpan.style.left = '0';
                fileNameSpan.style.width = '100%';
                fileNameSpan.style.backgroundColor = 'rgba(0,0,0,0.6)';
                fileNameSpan.style.color = 'white';
                fileNameSpan.style.fontSize = '10px';
                fileNameSpan.style.padding = '2px 5px';
                fileNameSpan.style.whiteSpace = 'nowrap';
                fileNameSpan.style.overflow = 'hidden';
                fileNameSpan.style.textOverflow = 'ellipsis';

                const removeBtn = document.createElement('button');
                removeBtn.textContent = '×'; // 使用更友好的叉号
                removeBtn.className = 'remove-preview-btn';
                removeBtn.style.position = 'absolute';
                removeBtn.style.top = '5px';
                removeBtn.style.right = '5px';
                removeBtn.style.background = '#ff4d4f';
                removeBtn.style.color = 'white';
                removeBtn.style.border = 'none';
                removeBtn.style.borderRadius = '50%';
                removeBtn.style.width = '24px';
                removeBtn.style.height = '24px';
                removeBtn.style.lineHeight = '24px';
                removeBtn.style.padding = '0';
                removeBtn.style.fontSize = '14px';
                removeBtn.style.cursor = 'pointer';
                removeBtn.style.boxShadow = '0 1px 3px rgba(0,0,0,0.2)';
                removeBtn.style.transition = 'background 0.3s ease';

                removeBtn.onmouseover = () => removeBtn.style.background = '#ff7875';
                removeBtn.onmouseout = () => removeBtn.style.background = '#ff4d4f';

                // 为每个文件创建一个独立的URL，并绑定到按钮的点击事件上
                const objectURL = URL.createObjectURL(file);
                img.src = objectURL;

                removeBtn.onclick = function() {
                    multiPreviewContainer.removeChild(imgWrapper);
                    URL.revokeObjectURL(objectURL); // 释放资源
                    // 如果需要，这里还需要更新原始的file input的files列表
                    // 这通常意味着你需要一个隐藏的input或者一个JS数组来管理实际要上传的文件
                    // 否则，虽然预览移除了，但实际的files列表并没有变
                };

                imgWrapper.appendChild(img);
                imgWrapper.appendChild(fileNameSpan);
                imgWrapper.appendChild(removeBtn);
                multiPreviewContainer.appendChild(imgWrapper);
            } else {
                // 对于非图片文件，显示文件名和类型
                const fileInfo = document.createElement('div');
                fileInfo.className = 'file-item';
                fileInfo.style.padding = '8px';
                fileInfo.style.border = '1px dashed #ccc';
                fileInfo.style.borderRadius = '4px';
                fileInfo.style.width = '180px';
                fileInfo.style.display = 'flex';
                fileInfo.style.alignItems = 'center';
                fileInfo.style.gap = '8px';

                const icon = document.createElement('span');
                icon.textContent = '?'; // 一个文件图标
                icon.style.fontSize = '20px';

                const nameType = document.createElement('span');
                nameType.innerHTML = `<strong>${file.name}</strong><br><small>${file.type}</small>`;
                nameType.style.whiteSpace = 'nowrap';
                nameType.style.overflow = 'hidden';
                nameType.style.textOverflow = 'ellipsis';
                nameType.style.flexGrow = '1';

                const removeFileBtn = removeBtn.cloneNode(true); // 克隆移除按钮
                removeFileBtn.onclick = function() {
                    multiPreviewContainer.removeChild(fileInfo);
                    // 非图片文件通常不需要revokeObjectURL，因为没有创建Blob URL
                };

                fileInfo.appendChild(icon);
                fileInfo.appendChild(nameType);
                fileInfo.appendChild(removeFileBtn);
                multiPreviewContainer.appendChild(fileInfo);
            }
        });
    }
});