javascript實現(xiàn)限制上傳文件大小
前言:
項目中經(jīng)常用到需要上傳文件、照片等功能,同時需要限制所上傳文件的大小。很多插件都會采用后臺請求驗證,前端Js校驗比較少。本篇介紹一個前端JS便捷判斷上傳文件大小的方法。
這個是比較好的
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
function fileChange(target, id) {
var fileSize = 0;
var filetypes = [".jpg", ".png", ".rar", ".txt", ".zip", ".doc", ".ppt", ".xls", ".pdf", ".docx", ".xlsx"];
var filepath = target.value;
var filemaxsize = 1024 * 2;//2M
if (filepath) {
var isnext = false;
var fileend = filepath.substring(filepath.indexOf("."));
if (filetypes && filetypes.length > 0) {
for (var i = 0; i < filetypes.length; i++) {
if (filetypes[i] == fileend) {
isnext = true;
break;
}
}
}
if (!isnext) {
alert("不接受此文件類型!");
target.value = "";
return false;
}
} else {
return false;
}
if (isIE && !target.files) {
var filePath = target.value;
var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
if (!fileSystem.FileExists(filePath)) {
alert("附件不存在,請重新輸入!");
return false;
}
var file = fileSystem.GetFile(filePath);
fileSize = file.Size;
} else {
fileSize = target.files[0].size;
}
var size = fileSize / 1024;
if (size > filemaxsize) {
alert("附件大小不能大于" + filemaxsize / 1024 + "M!");
target.value = "";
return false;
}
if (size <= 0) {
alert("附件大小不能為0M!");
target.value = "";
return false;
}
}
</script>
</head>
<body>
<input type="file" name="contractFileName" style="width: 500px;" onchange="fileChange(this);"/>
</body>
</html>
下面的代碼不建議使用
代碼很簡單,關(guān)鍵就是怎么用JS拿到文件然后獲取文件大小,進而去判斷攔截。由于各種歷史原因,IE的ActiveX控件因素,獲取文件的方法可能和其他瀏覽器有所不同,所以只需稍加判斷即可。
JS代碼:
<script type="text/javascript">
// 判斷是否為IE瀏覽器: /msie/i.test(navigator.userAgent) 為一個簡單正則
var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
function fileChange(target){
var fileSize = 0;
if (isIE && !target.files) { // IE瀏覽器
var filePath = target.value; // 獲得上傳文件的絕對路徑
/**
* ActiveXObject 對象為IE和Opera所兼容的JS對象
* 用法:
* var newObj = new ActiveXObject( servername.typename[, location])
* 其中newObj是必選項。返回 ActiveXObject對象 的變量名。
* servername是必選項。提供該對象的應(yīng)用程序的名稱。
* typename是必選項。要創(chuàng)建的對象的類型或類。
* location是可選項。創(chuàng)建該對象的網(wǎng)絡(luò)服務(wù)器的名稱。
*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
* Scripting.FileSystemObject 為 IIS 內(nèi)置組件,用于操作磁盤、文件夾或文本文件,
* 其中返回的 newObj 方法和屬性非常的多
* 如:var file = newObj.CreateTextFile("C:\test.txt", true) 第二個參表示目標文件存在時是否覆蓋
* file.Write("寫入內(nèi)容"); file.Close();
*/
var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
// GetFile(path) 方法從磁盤獲取一個文件并返回。
var file = fileSystem.GetFile(filePath);
fileSize = file.Size; // 文件大小,單位:b
}
else { // 非IE瀏覽器
fileSize = target.files[0].size;
}
var size = fileSize / 1024 / 1024;
if (size > 1) {
alert("附件不能大于1M");
}
}
</script>
HTML代碼
<input type="file" style="width: 500px;" onchange="fileChange(this);"/>
一個 簡單、輕便、快捷 的用JS代碼來判斷文件大小的方法就OK了,至于ActiveXObject對象感興趣的可以去深究,它可以根據(jù)入?yún)⒌牟煌祷夭煌膶ο螅ǔT搶ο蟮墓δ芎妥饔靡彩欠浅S杏煤蛷姶蟮摹?/p>
本文內(nèi)容就到這里了,是不是非常簡單實用的代碼呢,希望大家能夠喜歡。
相關(guān)文章
總結(jié)JavaScript的正則與其他語言的不同之處
我接觸過不少語言,我很看重一門語言的正則表達式是否強大,還有正則與語法的結(jié)合是否緊密.在這一點上,JavaScript做的還不錯,至少有正則字面量.當然,最強大的還是Perl.但最近發(fā)現(xiàn)JavaScript中的正則有幾個不同于其他語言的地方,下面一起來看下。2016-08-08
javascript中toFixed()四舍五入使用方法詳解
最近做的項目涉及到金額的計算,有一種方式就是進行四舍五入的規(guī)則進行小數(shù)點后面的尾數(shù)處理,以前一直以為toFixed方法就是四舍五入的,這里為大家分享一下2018-09-09
JS實現(xiàn)斐波那契數(shù)列的五種方式(小結(jié))
這篇文章主要介紹了JS實現(xiàn)斐波那契數(shù)列的五種方式(小結(jié)),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09

