ASP.NET 圖片上傳客戶端驗證：類型、大小、尺寸比例全檢查

JavaScript 完整驗證邏輯

<script language="javascript">
var img = new Image();

function Check_FileTypeAndFileSize() {
    var str = document.all.uploadFile.value;
    if (str == "") { alert("請先選擇要上傳的圖片！"); return false; }

    // 1. 文件擴展名驗證
    var pos = str.lastIndexOf(".");
    var ext = str.substring(pos).toLowerCase();
    if (ext != ".jpg" && ext != ".gif") {
        alert("您上傳的文件類型為 " + ext + "，圖片必須為 JPG、GIF 類型");
        return false;
    }

    // 2. 寬高比例驗證（需圖片加載完成）
    if (img.width / img.height > 1.6) {
        return confirm("您上傳的圖片比例大於 8:5，確認要上傳嗎？");
    }

    // 3. 文件大小驗證（IE 專有 fileSize 屬性，現代瀏覽器不可用）
    if (img.fileSize / 1024 > 150) {
        alert("您上傳的文件大小超出了 150K 限制！");
        return false;
    }
    return true;
}

// 即時預覽賦值給 img 對象
function changephoto() {
    img.src = document.all.uploadFile.value;
}
// -->
</script>

前端控件綁定

<div>
    <!-- 假設使用第三方上傳控件 Upload:InputFile -->
    <Upload:InputFile ID="uploadFile" name="UploadFilePath" runat="server" onchange="changephoto()" />
    <asp:Button ID="btnUpload" runat="server" Text="上傳" 
        OnClientClick="return Check_FileTypeAndFileSize()" OnClick="btnUpload_Click" />
</div>
<div class="upload">
    <img id="imgPreview" src="images/pic1.gif" runat="server" />
</div>

現代化改進建議

• 使用 `` 利用瀏覽器原生過濾。
• 文件大小驗證改用 HTML5 File API：`fileUpload.files[0].size`。
• 圖片尺寸驗證在 `img.onload` 事件中讀取 `naturalWidth/naturalHeight`。
• 服務端必須二次驗證（類型、大小、惡意內容掃描），前端驗證僅為體驗，不可信任。