[轉貼]上傳檔案前，JavaScript檢查檔案格式、大小
資料來源：http://www.blueshop.com.tw/board/show.asp?subcde=BRD20090219135915SXD&fumcde=
特別感謝Bryan大大的提供
範例程式如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<title>上傳</title>
</head>
<body>
<form ACTION="upload.asp" METHOD="POST" name="FileForm" enctype="multipart/form-data">
圖片: <input type="file" name="file1" size="20" id="file1">
<input type="button" value="確定上傳" onClick="checkFile()">
</form>
</body>
</html>
<script language="JavaScript">
//by Bryan(不來ㄣ)
//這裡控制要檢查的項目，true表示要檢查，false表示不檢查
var isCheckImageType = true; //是否檢查圖片副檔名
var isCheckImageWidth = true; //是否檢查圖片寬度
var isCheckImageHeight = true; //是否檢查圖片高度
var isCheckImageSize = true; //是否檢查圖片檔案大小
var ImageSizeLimit = 100000; //上傳上限，單位:byte
var ImageWidthLimit = 1200; //圖片寬度上限
var ImageHeightLimit = 1000; //圖片高度上限
function checkFile() {
var f = document.FileForm;
var re = /\.(jpg|gif)$/i; //允許的圖片副檔名
if (isCheckImageType && !re.test(f.file1.value)) {
alert("只允許上傳JPG或GIF影像檔");
} else {
var img = new Image();
img.onload = checkImage;
img.src = f.file1.value;
}
}
function checkImage() {
if (isCheckImageWidth && this.width > ImageWidthLimit) {
showMessage('寬度','px',this.width,ImageWidthLimit);
} else if (isCheckImageHeight && this.height > ImageHeightLimit) {
showMessage('高度','px',this.height,ImageHeightLimit);
} else if (isCheckImageSize && this.fileSize > ImageSizeLimit) {
showMessage('檔案大小','kb',this.fileSize/1000,ImageSizeLimit/1000);
} else {
document.FileForm.submit();
}
}
function showMessage(kind,unit,real,limit) {
var msg = "您所選擇的圖片kind為 real unit\n超過了上傳上限 limit unit\n不允許上傳！"
alert(msg.replace(/kind/,kind).replace(/unit/g,unit).replace(/real/,real).replace(/limit/,limit));
}
</script>
以下是簽名：
- 歡迎轉貼本站的文章，不過請在貼文主旨上加上【轉貼】，並在文章中附上本篇的超連結與站名【topcat姍舞之間的極度凝聚】，感恩大家的配合。
- 小喵大部分的文章會以小喵熟悉的語言VB.NET撰寫，如果您需要C#的Code，也許您可以試著用線上的工具進行轉換，這裡提供幾個參考
| Microsoft MVP Visual Studio and Development Technologies (2005~2019/6) | topcat Blog:http://www.dotblogs.com.tw/topcat |