Hey there! Let me walk you through a straightforward, no-external-resource approach to build that custom file upload component you need. We'll cover everything from hiding the default file input to adding file previews, icons, and delete buttons.

Step 1: HTML Structure #

First, we'll wrap the native input[type="file"] in a label (so we can style it like a button) and add a container for file previews. We'll hide the native input since it's hard to customize:

<div class="file-upload-container">
  <!-- Custom upload button -->
  <label for="file-upload" class="upload-btn">
    <span class="icon">📁</span> Select Files
  </label>
  <input type="file" id="file-upload" multiple>

  <!-- Container for file previews -->
  <div id="file-previews" class="file-previews"></div>
</div>

Step 2: CSS Styling #

Next, let's style the component to make it look polished. We'll hide the native input, style the custom button, and design the file preview cards:

/* Hide the native file input */
#file-upload {
  display: none;
}

/* Style the custom upload button */
.upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #007bff;
  color: white;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}

.upload-btn:hover {
  background: #0056b3;
}

/* File preview container */
.file-previews {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Individual file preview card */
.file-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.file-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Delete button */
.delete-btn {
  background: #dc3545;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
}

.delete-btn:hover {
  background: #c82333;
}

Step 3: JavaScript Logic #

Now we'll add functionality to handle file selection, generate previews with icons, and let users delete files before upload. We'll map common file types to icons for better UX:

const fileUpload = document.getElementById('file-upload');
const filePreviews = document.getElementById('file-previews');

// Map file types to icons
const fileTypeIcons = {
  'image': '🖼️',
  'video': '🎥',
  'audio': '🎵',
  'pdf': '📄',
  'document': '📃',
  'default': '📁'
};

// Get icon for a file
function getFileIcon(file) {
  if (file.type.startsWith('image/')) return fileTypeIcons.image;
  if (file.type.startsWith('video/')) return fileTypeIcons.video;
  if (file.type.startsWith('audio/')) return fileTypeIcons.audio;
  if (file.type === 'application/pdf') return fileTypeIcons.pdf;
  if (file.type.startsWith('text/') || file.type.includes('document')) return fileTypeIcons.document;
  return fileTypeIcons.default;
}

// Handle file selection
fileUpload.addEventListener('change', (e) => {
  const files = Array.from(e.target.files);
  
  files.forEach(file => {
    // Create preview element
    const preview = document.createElement('div');
    preview.className = 'file-preview';
    preview.dataset.fileName = file.name;

    // File info with icon
    const fileInfo = document.createElement('div');
    fileInfo.className = 'file-info';
    fileInfo.innerHTML = `
      <span class="file-icon">${getFileIcon(file)}</span>
      <span class="file-name">${file.name}</span>
      <span class="file-size">(${formatFileSize(file.size)})</span>
    `;

    // Delete button
    const deleteBtn = document.createElement('button');
    deleteBtn.className = 'delete-btn';
    deleteBtn.textContent = 'Delete';
    deleteBtn.addEventListener('click', () => {
      preview.remove();
      // Update the input's files (a bit tricky—we'll use a DataTransfer to recreate the file list)
      updateFileInput();
    });

    preview.appendChild(fileInfo);
    preview.appendChild(deleteBtn);
    filePreviews.appendChild(preview);
  });
});

// Format file size to readable format
function formatFileSize(bytes) {
  if (bytes < 1024) return bytes + ' B';
  if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
  return (bytes / 1048576).toFixed(1) + ' MB';
}

// Update the file input after deleting a file
function updateFileInput() {
  const remainingFiles = Array.from(filePreviews.children).map(preview => {
    return Array.from(fileUpload.files).find(f => f.name === preview.dataset.fileName);
  });

  const dataTransfer = new DataTransfer();
  remainingFiles.forEach(file => dataTransfer.items.add(file));
  fileUpload.files = dataTransfer.files;
}

Key Notes & Enhancements #

• File Type Icons: Instead of emojis, you can use inline SVGs or icon fonts (just include the SVG code directly in your HTML if you don't want external resources).
• Single File Upload: If you don't need multiple files, remove the multiple attribute from the input and adjust the JS to replace the preview instead of adding new ones.
• Validation: Add checks for file size, type, or number of files if needed—just add logic before creating the preview.
• Accessibility: Make sure the component is accessible by adding proper ARIA labels to the button and preview elements.

This approach works entirely with vanilla HTML/CSS/JS, no external libraries required. You can tweak the styles and icons to match your project's design system easily!

内容的提问来源于stack exchange，提问作者dutchkillsg