前言：
項目中經常用到需要上傳文件、照片等功能，同時需要限制所上傳文件的大小。很多插件都會採用後台請求驗證，前端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" onchange="fileChange(this);"/></body></html>下面的代碼不建議使用
代碼很簡單，關鍵就是怎麼用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是必選項。提供該對象的應用程序的名稱。 * typename是必選項。要創建的對象的類型或類。 * location是可選項。創建該對象的網絡服務器的名稱。 *///////////////////////////////////////////////////// * Scripting.FileSystemObject 為IIS 內置組件，用於操作磁盤、文件夾或文本文件， * 其中返回的newObj 方法和屬性非常的多* 如：var file = newObj.CreateTextFile("C:/test.txt", true) 第二個參表示目標文件存在時是否覆蓋* file.Write("寫入內容"); 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" onchange="fileChange(this);"/>
一個簡單、輕便、快捷的用JS代碼來判斷文件大小的方法就OK了，至於ActiveXObject對象感興趣的可以去深究，它可以根據入參的不同返回不同的對象，通常該對象的功能和作用也是非常有用和強大的。
本文內容就到這裡了，是不是非常簡單實用的代碼呢，希望大家能夠喜歡。