DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> javascript實現限制上傳文件大小
javascript實現限制上傳文件大小
編輯:關於JavaScript     

前言:

  項目中經常用到需要上傳文件、照片等功能,同時需要限制所上傳文件的大小。很多插件都會采用後台請求驗證,前端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對象感興趣的可以去深究,它可以根據入參的不同返回不同的對象,通常該對象的功能和作用也是非常有用和強大的。

本文內容就到這裡了,是不是非常簡單實用的代碼呢,希望大家能夠喜歡。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved