方法一，利用ActiveX控件實現：
代碼
1
<
script
type
="text/javascript"
>
2 function getFileSize(filePath)
3 {
4 var fso = new ActiveXObject( " Scripting.FileSystemObject " );
5 alert( " 文件大小為： " + fso.GetFile(filePath).size);
6 }
7 </ script >
8 < body >
9 < INPUT TYPE ="file" NAME ="file" SIZE ="30" onchange ="getFileSize(this.value);" >
10 </ body >
11
12
2 function getFileSize(filePath)
3 {
4 var fso = new ActiveXObject( " Scripting.FileSystemObject " );
5 alert( " 文件大小為： " + fso.GetFile(filePath).size);
6 }
7 </ script >
8 < body >
9 < INPUT TYPE ="file" NAME ="file" SIZE ="30" onchange ="getFileSize(this.value);" >
10 </ body >
11
12
這個方法在IE可以用，不足之處會有安全提示，把文件名改為.hta則會屏蔽掉安全提示。
方法二，利用img的dynsrc屬性：
代碼
1
<
script
type
="text/javascript"
>
2 function getFileSize(filePath)
3 {
4 var image = new Image();
5 image.dynsrc = filePath;
6 alert(image.fileSize);
7 }
8 </ script >
9 < body >
10 < INPUT TYPE ="file" NAME ="file" SIZE ="30" onchange ="getFileSize(this.value)" >
11 </ body >
12
13
2 function getFileSize(filePath)
3 {
4 var image = new Image();
5 image.dynsrc = filePath;
6 alert(image.fileSize);
7 }
8 </ script >
9 < body >
10 < INPUT TYPE ="file" NAME ="file" SIZE ="30" onchange ="getFileSize(this.value)" >
11 </ body >
12
13
這個方法在IE6可以用，在IE7，IE8，Firefox，chrome不能用。
方法三，利用img的fileSize：
代碼
1
<
script
language
=javascript
>
2 var ImgObj = new Image(); // 建立一個圖像對象
3 var AllImgExt = " .jpg|.jpeg|.gif|.bmp|.png| " // 全部圖片格式類型
4 var FileObj,ImgFileSize,ImgWidth,ImgHeight,FileExt,ErrMsg,FileMsg,HasCheked,IsImg // 全局變量 圖片相關屬性
5 // 以下為限制變量
6 var AllowExt = " .jpg|.gif|.doc|.txt| " // 允許上傳的文件類型 ?為無限制 每個擴展名后邊要加一個"|" 小寫字母表示
7 // var AllowExt=0
8 var AllowImgFileSize = 70 ; // 允許上傳圖片文件的大小 0為無限制 單位：KB
9 var AllowImgWidth = 500 ; // 允許上傳的圖片的寬度 ?為無限制 單位：px(像素)
10 var AllowImgHeight = 500 ; // 允許上傳的圖片的高度 ?為無限制 單位：px(像素)
11 HasChecked = false ;
12 function CheckProperty(obj) // 檢測圖像屬性
13 {
14 FileObj = obj;
15 if (ErrMsg != "" ) // 檢測是否為正確的圖像文件 返回出錯信息並重置
16 {
17 ShowMsg(ErrMsg, false );
18 return false ; // 返回
19 }
20
21 if (ImgObj.readyState != " complete " ) // 如果圖像是未加載完成進行循環檢測
22 {
23 setTimeout( " CheckProperty(FileObj) " , 500 );
24 return false ;
25 }
26
27 ImgFileSize = Math.round(ImgObj.fileSize / 1024*100) / 100 ; // 取得圖片文件的大小
28 ImgWidth = ImgObj.width // 取得圖片的寬度
29 ImgHeight = ImgObj.height; // 取得圖片的高度
30 FileMsg = " \n圖片大小: " + ImgWidth + " * " + ImgHeight + " px " ;
31 FileMsg = FileMsg + " \n圖片文件大小: " + ImgFileSize + " Kb " ;
32 FileMsg = FileMsg + " \n圖片文件擴展名: " + FileExt;
33
34 if (AllowImgWidth != 0 && AllowImgWidth < ImgWidth)
35 ErrMsg = ErrMsg + " \n圖片寬度超過限制。請上傳寬度小於 " + AllowImgWidth + " px的文件，當前圖片寬度為 " + ImgWidth + " px " ;
36
37 if (AllowImgHeight != 0 && AllowImgHeight < ImgHeight)
38 ErrMsg = ErrMsg + " \n圖片高度超過限制。請上傳高度小於 " + AllowImgHeight + " px的文件，當前圖片高度為 " + ImgHeight + " px " ;
39
40 if (AllowImgFileSize != 0 && AllowImgFileSize < ImgFileSize)
41 ErrMsg = ErrMsg + " \n圖片文件大小超過限制。請上傳小於 " + AllowImgFileSize + " KB的文件，當前文件大小為 " + ImgFileSize + " KB " ;
42
43 if (ErrMsg != "" )
44 ShowMsg(ErrMsg, false );
45 else
46 ShowMsg(FileMsg, true );
47 }
48
49 ImgObj.onerror = function (){ErrMsg = ' \n圖片格式不正確或者圖片已損壞! ' }
50
51 function ShowMsg(msg,tf) // 顯示提示信息 tf=true 顯示文件信息 tf=false 顯示錯誤信息 msg-信息內容
52 {
53 msg = msg.replace( " \n " , " <li> " );
54 msg = msg.replace( / \n / gi, " <li> " );
55 if ( ! tf)
56 {
57 document.all.UploadButton.disabled = true ;
58 FileObj.outerHTML = FileObj.outerHTML;
59 MsgList.innerHTML = msg;
60 HasChecked = false ;
61 }
62 else
63 {
64 document.all.UploadButton.disabled = false ;
65 if (IsImg)
66 PreviewImg.innerHTML = " <img src=' " + ImgObj.src + " ' width='60' height='60'> "
67 else
68 PreviewImg.innerHTML = " 非圖片文件 " ;
69 MsgList.innerHTML = msg;
70 HasChecked = true ;
71 }
72 }
73
74 function CheckExt(obj)
75 {
76 ErrMsg = "" ;
77 FileMsg = "" ;
78 FileObj = obj;
79 IsImg = false ;
80 HasChecked = false ;
81 PreviewImg.innerHTML = " 預覽區 " ;
82 if (obj.value == "" ) return false ;
83 MsgList.innerHTML = " 文件信息處理中... " ;
84 document.all.UploadButton.disabled = true ;
85 FileExt = obj.value.substr(obj.value.lastIndexOf( " . " )).toLowerCase();
86 if (AllowExt != 0 && AllowExt.indexOf(FileExt + " | " ) ==- 1 ) // 判斷文件類型是否允許上傳
87 {
88 ErrMsg = " \n該文件類型不允許上傳。請上傳 " + AllowExt + " 類型的文件，當前文件類型為 " + FileExt;
89 ShowMsg(ErrMsg, false );
90 return false ;
91 }
92
93 if (AllImgExt.indexOf(FileExt + " | " ) !=- 1 ) // 如果圖片文件，則進行圖片信息處理
94 {
95 IsImg = true ;
96 ImgObj.src = obj.value;
97 CheckProperty(obj);
98 return false ;
99 }
100 else
101 {
102 FileMsg = " \n文件擴展名: " + FileExt;
103 ShowMsg(FileMsg, true );
104 }
105
106 }
107
108 function SwitchUpType(tf)
109 {
110 if (tf)
111 str = ' <input type="file" name="file1" onchange="CheckExt(this)" style="width:180px;"> '
112 else
113 str = ' <input type="text" name="file1" onblur="CheckExt(this)" style="width:180px;"> '
114 document.all.file1.outerHTML = str;
115 document.all.UploadButton.disabled = true ;
116 MsgList.innerHTML = "" ;
117 }
118
119 </ script >
120 < form enctype ="multipart/form-data" method ="POST" onsubmit ="return HasChecked;" >
121 < fieldset style ="width: 372; height: 60;padding:2px;" >
122 < legend >< font color ="#FF0000" > 圖片來源 </ font ></ legend >
123 < input type ="radio" name ="radio1" checked onclick ="SwitchUpType(true);" > 本地 < input type ="radio" name ="radio1" onclick ="SwitchUpType(false);" > 遠程： < input type ="file" name ="file1" onchange ="CheckExt(this)" style ="width:180px;" > < input type ="submit" id ="UploadButton" value ="開始上傳" disabled >
124
125 < div style ="border:1 solid #808080;background:#E0E0E0;width100%;height:20px;color:#606060;padding:5px;" >
126 < table border ="0" >< tr >< td width ="60" id ="PreviewImg" > 預覽區 </ td >< td id ="MsgList" valign ="top" ></ td ></ tr ></ table >
127 </ div >
128 </ fieldset >
129 </ form >
130
131
2 var ImgObj = new Image(); // 建立一個圖像對象
3 var AllImgExt = " .jpg|.jpeg|.gif|.bmp|.png| " // 全部圖片格式類型
4 var FileObj,ImgFileSize,ImgWidth,ImgHeight,FileExt,ErrMsg,FileMsg,HasCheked,IsImg // 全局變量 圖片相關屬性
5 // 以下為限制變量
6 var AllowExt = " .jpg|.gif|.doc|.txt| " // 允許上傳的文件類型 ?為無限制 每個擴展名后邊要加一個"|" 小寫字母表示
7 // var AllowExt=0
8 var AllowImgFileSize = 70 ; // 允許上傳圖片文件的大小 0為無限制 單位：KB
9 var AllowImgWidth = 500 ; // 允許上傳的圖片的寬度 ?為無限制 單位：px(像素)
10 var AllowImgHeight = 500 ; // 允許上傳的圖片的高度 ?為無限制 單位：px(像素)
11 HasChecked = false ;
12 function CheckProperty(obj) // 檢測圖像屬性
13 {
14 FileObj = obj;
15 if (ErrMsg != "" ) // 檢測是否為正確的圖像文件 返回出錯信息並重置
16 {
17 ShowMsg(ErrMsg, false );
18 return false ; // 返回
19 }
20
21 if (ImgObj.readyState != " complete " ) // 如果圖像是未加載完成進行循環檢測
22 {
23 setTimeout( " CheckProperty(FileObj) " , 500 );
24 return false ;
25 }
26
27 ImgFileSize = Math.round(ImgObj.fileSize / 1024*100) / 100 ; // 取得圖片文件的大小
28 ImgWidth = ImgObj.width // 取得圖片的寬度
29 ImgHeight = ImgObj.height; // 取得圖片的高度
30 FileMsg = " \n圖片大小: " + ImgWidth + " * " + ImgHeight + " px " ;
31 FileMsg = FileMsg + " \n圖片文件大小: " + ImgFileSize + " Kb " ;
32 FileMsg = FileMsg + " \n圖片文件擴展名: " + FileExt;
33
34 if (AllowImgWidth != 0 && AllowImgWidth < ImgWidth)
35 ErrMsg = ErrMsg + " \n圖片寬度超過限制。請上傳寬度小於 " + AllowImgWidth + " px的文件，當前圖片寬度為 " + ImgWidth + " px " ;
36
37 if (AllowImgHeight != 0 && AllowImgHeight < ImgHeight)
38 ErrMsg = ErrMsg + " \n圖片高度超過限制。請上傳高度小於 " + AllowImgHeight + " px的文件，當前圖片高度為 " + ImgHeight + " px " ;
39
40 if (AllowImgFileSize != 0 && AllowImgFileSize < ImgFileSize)
41 ErrMsg = ErrMsg + " \n圖片文件大小超過限制。請上傳小於 " + AllowImgFileSize + " KB的文件，當前文件大小為 " + ImgFileSize + " KB " ;
42
43 if (ErrMsg != "" )
44 ShowMsg(ErrMsg, false );
45 else
46 ShowMsg(FileMsg, true );
47 }
48
49 ImgObj.onerror = function (){ErrMsg = ' \n圖片格式不正確或者圖片已損壞! ' }
50
51 function ShowMsg(msg,tf) // 顯示提示信息 tf=true 顯示文件信息 tf=false 顯示錯誤信息 msg-信息內容
52 {
53 msg = msg.replace( " \n " , " <li> " );
54 msg = msg.replace( / \n / gi, " <li> " );
55 if ( ! tf)
56 {
57 document.all.UploadButton.disabled = true ;
58 FileObj.outerHTML = FileObj.outerHTML;
59 MsgList.innerHTML = msg;
60 HasChecked = false ;
61 }
62 else
63 {
64 document.all.UploadButton.disabled = false ;
65 if (IsImg)
66 PreviewImg.innerHTML = " <img src=' " + ImgObj.src + " ' width='60' height='60'> "
67 else
68 PreviewImg.innerHTML = " 非圖片文件 " ;
69 MsgList.innerHTML = msg;
70 HasChecked = true ;
71 }
72 }
73
74 function CheckExt(obj)
75 {
76 ErrMsg = "" ;
77 FileMsg = "" ;
78 FileObj = obj;
79 IsImg = false ;
80 HasChecked = false ;
81 PreviewImg.innerHTML = " 預覽區 " ;
82 if (obj.value == "" ) return false ;
83 MsgList.innerHTML = " 文件信息處理中... " ;
84 document.all.UploadButton.disabled = true ;
85 FileExt = obj.value.substr(obj.value.lastIndexOf( " . " )).toLowerCase();
86 if (AllowExt != 0 && AllowExt.indexOf(FileExt + " | " ) ==- 1 ) // 判斷文件類型是否允許上傳
87 {
88 ErrMsg = " \n該文件類型不允許上傳。請上傳 " + AllowExt + " 類型的文件，當前文件類型為 " + FileExt;
89 ShowMsg(ErrMsg, false );
90 return false ;
91 }
92
93 if (AllImgExt.indexOf(FileExt + " | " ) !=- 1 ) // 如果圖片文件，則進行圖片信息處理
94 {
95 IsImg = true ;
96 ImgObj.src = obj.value;
97 CheckProperty(obj);
98 return false ;
99 }
100 else
101 {
102 FileMsg = " \n文件擴展名: " + FileExt;
103 ShowMsg(FileMsg, true );
104 }
105
106 }
107
108 function SwitchUpType(tf)
109 {
110 if (tf)
111 str = ' <input type="file" name="file1" onchange="CheckExt(this)" style="width:180px;"> '
112 else
113 str = ' <input type="text" name="file1" onblur="CheckExt(this)" style="width:180px;"> '
114 document.all.file1.outerHTML = str;
115 document.all.UploadButton.disabled = true ;
116 MsgList.innerHTML = "" ;
117 }
118
119 </ script >
120 < form enctype ="multipart/form-data" method ="POST" onsubmit ="return HasChecked;" >
121 < fieldset style ="width: 372; height: 60;padding:2px;" >
122 < legend >< font color ="#FF0000" > 圖片來源 </ font ></ legend >
123 < input type ="radio" name ="radio1" checked onclick ="SwitchUpType(true);" > 本地 < input type ="radio" name ="radio1" onclick ="SwitchUpType(false);" > 遠程： < input type ="file" name ="file1" onchange ="CheckExt(this)" style ="width:180px;" > < input type ="submit" id ="UploadButton" value ="開始上傳" disabled >
124
125 < div style ="border:1 solid #808080;background:#E0E0E0;width100%;height:20px;color:#606060;padding:5px;" >
126 < table border ="0" >< tr >< td width ="60" id ="PreviewImg" > 預覽區 </ td >< td id ="MsgList" valign ="top" ></ td ></ tr ></ table >
127 </ div >
128 </ fieldset >
129 </ form >
130
131
在IE，FireFox，chrome都可以用，不過只判斷圖片文件的大小。