JSP 圖片上傳即時預覽：原生 JavaScript 跨瀏覽器實作

使用者上傳頭像或圖片時，即時預覽能大幅提升體驗。本文提供一個純前端方案，相容 IE（含舊版濾鏡模式）與現代瀏覽器，無需伺服器端參與，直接在 <input type="file"> 選擇後顯示縮圖。

核心邏輯

1. 監聽 onchange 事件。
2. 現代瀏覽器：使用 FileReader.readAsDataURL() 或 URL.createObjectURL() 產生 Blob URL。
3. IE10 以下：利用 AlphaImageLoader 濾鏡讀取本地路徑（需安全性設定允許）。
4. 統一更新 <img> 的 src 與顯示樣式。

完整 HTML + JavaScript 代碼

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圖片上傳即時預覽</title>
<style>
    #preview { display: none; width: 300px; height: 120px; border: 1px solid #ddd; }
    #localImag { display: none; width: 250px; height: 200px; } /* IE 專用容器 */
</style>
</head>
<body>
<input type="file" id="doc" name="doc" accept="image/*" onchange="setImagePreview()">
<p>
    <div id="localImag"><img id="preview" /></div>
</p>

<script>
function setImagePreview() {
    var docObj = document.getElementById("doc");
    var imgObjPreview = document.getElementById("preview");
    var localImagId = document.getElementById("localImag");

    if (docObj.files && docObj.files[0]) {
        // === 現代瀏覽器 ===
        var file = docObj.files[0];
        // 簡易檢查圖片類型
        if (!/^image\//.test(file.type)) {
            alert("請選擇圖片檔案！");
            return false;
        }

        imgObjPreview.style.display = 'block';
        localImagId.style.display = 'none';

        // 建議使用 FileReader（支援 Base64，適合表單提交預覽）
        var reader = new FileReader();
        reader.onload = function(e) {
            imgObjPreview.src = e.target.result;
        };
        reader.readAsDataURL(file);

        // 或者使用 createObjectURL（效能較好，但頁面卸載需 revokeObjectURL）
        // imgObjPreview.src = window.URL.createObjectURL(file);
    } else {
        // === IE10 以下 fallback ===
        docObj.select();
        var imgSrc = document.selection.createRange().text;
        if (!imgSrc) return false;

        localImagId.style.display = 'block';
        imgObjPreview.style.display = 'none';

        try {
            localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
            localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
        } catch (e) {
            alert("圖片格式不正確，請重新選擇！");
            return false;
        }
        document.selection.empty();
    }
    return true;
}
</script>
</body>
</html>

關鍵點解析

進階建議

• 壓縮預覽：大圖直接預覽會佔記憶體，可結合 Canvas 等比縮放後再 toDataURL()。
• 多檔支援：迴圈 docObj.files 陣列，動態建立多個 <img>。
• 表單整合：預覽 Base64 字串可存入 <input type="hidden">，配合後端解碼儲存（注意大小限制）。
• 記憶體釋放：使用 createObjectURL 時，頁面離開或移除預覽時呼叫 URL.revokeObjectURL()。

效果示意