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

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);             }         });     } });