HTML file 控件樣式美化與文件上傳最佳實踐：從原生到定製化完整指南

原生 <input type="file"> 的侷限性

• 樣式極難定製（跨瀏覽器 Shadow DOM 結構不同）。
• 無法通過 CSS 隱藏「未選擇任何文件」文字、修改按鈕文字。
• 無法觸發自定義點擊事件（如打開前校驗、打開後預覽）。

核心美化原理：標籤代理 + 透明覆蓋

1. 保留原生 <input type="file"> 保證功能完整性。
2. 設置 opacity: 0、position: absolute、z-index: 1 使其不可見但可點擊。
3. 用 <label> 或自定義 <button> + <span> 構建美觀 UI，關聯 for 屬性或 JS 觸發 input.click()。
4. JS 監聽 change 事件讀取 files 列表，實時顯示文件名/預覽圖/進度條。

方案一：純 CSS 最小改造 (IE10+、現代瀏覽器)

<style>
.file-wrapper {
    position: relative;
    display: inline-block;
    width: 200px;
    height: 36px;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    background: #f5f5f5;
}
.file-wrapper input[type="file"] {
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}
.file-wrapper .btn {
    display: block;
    width: 100%; height: 100%;
    line-height: 36px;
    text-align: center;
    color: #333;
    background: linear-gradient(to bottom, #fff, #eaeaea);
    pointer-events: none; /* 讓點擊穿透到 input */
}
.file-wrapper .filename {
    position: absolute;
    left: 80px; right: 10px; top: 0;
    line-height: 36px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #666;
    font-size: 14px;
    pointer-events: none;
}
</style>

<div class="file-wrapper">
    <input type="file" id="file1" name="file" onchange="showName(this)">
    <span class="btn">選擇文件</span>
    <span class="filename">未選擇任何文件</span>
</div>

<script>
function showName(input) {
    const name = input.files[0]?.name || '未選擇任何文件';
    input.nextElementSibling.nextElementSibling.textContent = name;
}
</script>

方案二：Label 代理 + 完全自定義樣式 (推薦，無需 JS 觸發點擊)

<style>
.custom-file-upload {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid #007bff;
    border-radius: 4px;
    background: #007bff;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
}
.custom-file-upload:hover { background: #0056b3; }
.custom-file-upload:active { background: #004085; }
.custom-file-upload input { display: none; } /* 完全隱藏原生 */
.custom-file-upload .filename {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #e0e0e0;
    font-weight: normal;
}
</style>

<label class="custom-file-upload">
    <input type="file" id="file2" name="file" onchange="updateName(this)">
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
        <polyline points="17 8 12 3 7 8"/>
        <line x1="12" y1="3" x2="12" y2="15"/>
    &svg>
    <span>上傳文件</span>
    <span class="filename">未選擇文件</span>
</label>

<script>
function updateName(input) {
    const label = input.closest('label');
    const name = input.files[0]?.name || '未選擇文件';
    label.querySelector('.filename').textContent = name;
}
</script>

方案三：多文件上傳 + 縮略圖預覽 + 刪除 + 進度條 (生產級組件雛形)

<div class="uploader" id="uploader">
    <input type="file" id="multiFile" multiple hidden>
    <button type="button" class="btn-primary" onclick="document.getElementById('multiFile').click()">
        <svg class="icon">...</svg> 選擇多個文件
    </button>
    <div class="file-list" id="fileList"></div>
</div>

<style>
.uploader { max-width: 600px; font-family: system-ui; }
.file-list { margin-top: 16px; }
.file-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px; border: 1px solid #eee; border-radius: 6px;
    margin-bottom: 8px; background: #fafafa;
}
.file-item img { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; }
.file-item .info { flex: 1; min-width: 0; }
.file-item .name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-item .size { color: #888; font-size: 12px; }
.file-item .progress { width: 100px; height: 4px; background: #eee; border-radius: 2px; overflow: hidden; }
.file-item .progress-bar { height: 100%; background: #007bff; transition: width 0.3s; }
.file-item .btn-del { color: #dc3545; background: none; border: none; cursor: pointer; }
</style>

<script>
const input = document.getElementById('multiFile');
const list = document.getElementById('fileList');

input.addEventListener('change', () => {
    list.innerHTML = ''; // 清空舊列表
    Array.from(input.files).forEach((file, idx) => {
        const item = document.createElement('div');
        item.className = 'file-item';
        item.dataset.index = idx;

        // 圖片預覽
        let preview = '';
        if (file.type.startsWith('image/')) {
            const url = URL.createObjectURL(file);
            preview = `<img src="${url}" alt="">`;
        } else {
            preview = `<div class="icon-file">📄</div>`;
        }

        item.innerHTML = `
            ${preview}
            <div class="info">
                <div class="name" title="${file.name}">${file.name}</div>
                <div class="size">${formatSize(file.size)}</div>
            </div>
            <div class="progress"><div class="progress-bar" style="width:0%"></div></div>
            <button class="btn-del" onclick="removeFile(${idx})">×</button>
        `;
        list.appendChild(item);

        // 模擬上傳進度 (實際對接 XMLHttpRequest/fetch upload 事件)
        simulateUpload(item.querySelector('.progress-bar'));
    });
    input.value = ''; // 重置允許重複選擇同一文件
});

function removeFile(idx) {
    // 實際需操作 FileList (不可變) → 轉為 DataTransfer 或陣列管理
    console.log('移除索引', idx);
    // 簡單演示：移除 DOM
    document.querySelector(`.file-item[data-index="${idx}"]`)?.remove();
}

function formatSize(bytes) {
    if (bytes < 1024) return bytes + ' B';
    if (bytes < 1024*1024) return (bytes/1024).toFixed(1) + ' KB';
    return (bytes/1024/1024).toFixed(1) + ' MB';
}

function simulateUpload(bar) {
    let w = 0;
    const timer = setInterval(() => {
        w += Math.random() * 15;
        if (w >= 100) { w = 100; clearInterval(timer); }
        bar.style.width = w + '%';
    }, 200);
}
</script>

表單提交與後端接收

同步表單提交 (傳統)

<form action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="file" required>
    <button type="submit">上傳</button>
</form>

後端 (Spring MVC 示例)：

@PostMapping("/upload")
public String upload(@RequestParam("file") MultipartFile file) throws IOException {
    if (file.isEmpty()) return "error";
    Files.copy(file.getInputStream(), Paths.get("/data/uploads/" + file.getOriginalFilename()));
    return "success";
}

異步 AJAX 上傳 (現代 SPA)

async function uploadFiles(files) {
    const formData = new FormData();
    files.forEach(f => formData.append('files', f));

    const response = await fetch('/api/upload', {
        method: 'POST',
        body: formData,
        // headers: {'X-CSRF-Token': token} // 如有需要
    });
    return response.json();
}

// 進度監聽 (XMLHttpRequest 原生支持 upload.onprogress)
function uploadWithProgress(file, onProgress) {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.upload.onprogress = e => onProgress(e.loaded / e.total);
        xhr.onload = () => resolve(xhr.response);
        xhr.onerror = () => reject(xhr.statusText);
        xhr.open('POST', '/api/upload');
        const fd = new FormData();
        fd.append('file', file);
        xhr.send(fd);
    });
}

無障礙與用戶體驗清單

• ✅ <label> 關聯 input (方案二) 或 aria-label (方案一/三)。
• ✅ 鍵盤可聚焦、可操作 (Tab 到按鈕，Enter/Space 觸發)。
• ✅ 狀態語義化：aria-busy、aria-live="polite" 宣告上傳進度。
• ✅ 文件類型/大小前端預校驗 (accept、file.size)，減少無效請求。
• ✅ 錯誤狀態視覺反饋 (紅框、提示文案)，非僅依賴顏色。

安全與性能提醒

總結

1. 原生 input 不可直接美化，核心模式是「透明覆蓋 + 代理元素」或「Label 關聯 + 隱藏 input」。
2. 方案二 最簡潔語義化，推薦大多數場景；方案三 適合需要預覽、進度、多文件管理的豐富交互。
3. 上傳功能前端只負責選擇、預覽、進度、體驗，安全、存儲、權限、掃毒全靠後端。
4. 現代項目建議封裝為通用組件 (Vue/React/Svelte 組件或 Web Component)，統一風格、無障礙、國際化。

1. 上一篇文章： Java 連接 MySQL 數據庫完整步驟：從驅動安裝到 CRUD 代碼實戰
2. 下一篇文章： Java 多線程與並發編程全景總結：從 JMM 到鎖優化的系統性知識圖譜

Java 相關知識

J2EE 應用部署策略：每服務器單應用 vs 多應用共享 JVM 深度權衡

J2EE 規範定義了 EAR 打包標準，但未規定部署拓撲：是

Java IO 進階：BufferedReader/BufferedWriter 緩衝字符流詳解與實戰

前言 緩衝流是 Java IO 體系中提升讀寫效率的關鍵裝飾

SWT/JFace GridLayout 佈局管理器完整指南：從入門到進階實戰

前言 在 SWT/JFace 桌面應用開發中，GridLay

JFreeChart 蜘蛛網圖(雷達圖)添加刻度標籤完整解決方案

問題背景 JFreeChart 作為老牌 Java 開源圖表