前言:
項目中經常用到需要上傳文件、照片等功能,同時需要限制所上傳文件的大小。很多插件都會采用后台請求驗證,前端Js校驗比較少。本篇介紹一個前端JS便捷判斷上傳文件大小的方法。
代碼很簡單,關鍵就是怎么用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" style="width: 500px;" onchange="fileChange(this);"/>
一個 簡單、輕便、快捷 的用JS代碼來判斷文件大小的方法就OK了,至於ActiveXObject對象感興趣的可以去深究,它可以根據入參的不同返回不同的對象,通常該對象的功能和作用也是非常有用和強大的。
ps:歡迎轉載,轉載請注明出處:http://www.cnblogs.com/liuyitian/p/4275430.html
寫作不易,難免有疏漏和錯誤,還請慷慨指正,不錯請推薦
每天多學一點點 代碼少敲一點點