快捷導(dǎo)航

javascript實(shí)現(xiàn)限制上傳文件大小

更新時(shí)間：2015年02月06日 08:39:24 投稿：hebedich

這篇文章主要介紹了javascript實(shí)現(xiàn)限制上傳文件大小的方法和示例,需要的朋友可以參考下

前言：

　　項(xiàng)目中經(jīng)常用到需要上傳文件、照片等功能，同時(shí)需要限制所上傳文件的大小。很多插件都會(huì)采用后臺(tái)請(qǐng)求驗(yàn)證，前端Js校驗(yàn)比較少。本篇介紹一個(gè)前端JS便捷判斷上傳文件大小的方法。

這個(gè)是比較好的

<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("不接受此文件類(lèi)型！");
          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("附件不存在，請(qǐng)重新輸入！");
          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>

下面的代碼不建議使用

　　代碼很簡(jiǎn)單，關(guān)鍵就是怎么用JS拿到文件然后獲取文件大小，進(jìn)而去判斷攔截。由于各種歷史原因，IE的ActiveX控件因素，獲取文件的方法可能和其他瀏覽器有所不同，所以只需稍加判斷即可。

JS代碼：

<script type="text/javascript">  
  // 判斷是否為IE瀏覽器： /msie/i.test(navigator.userAgent) 為一個(gè)簡(jiǎn)單正則
  var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
  function fileChange(target){
    var fileSize = 0;
    if (isIE && !target.files) {  // IE瀏覽器
      var filePath = target.value; // 獲得上傳文件的絕對(duì)路徑
      /**
       * ActiveXObject 對(duì)象為IE和Opera所兼容的JS對(duì)象
       * 用法：
       *     var newObj = new ActiveXObject( servername.typename[, location])
       *     其中newObj是必選項(xiàng)。返回 ActiveXObject對(duì)象 的變量名。
       *    servername是必選項(xiàng)。提供該對(duì)象的應(yīng)用程序的名稱(chēng)。
       *    typename是必選項(xiàng)。要?jiǎng)?chuàng)建的對(duì)象的類(lèi)型或類(lèi)。
       *    location是可選項(xiàng)。創(chuàng)建該對(duì)象的網(wǎng)絡(luò)服務(wù)器的名稱(chēng)。
       *\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
       *   Scripting.FileSystemObject 為 IIS 內(nèi)置組件，用于操作磁盤(pán)、文件夾或文本文件，
       *  其中返回的 newObj 方法和屬性非常的多
       *  如：var file = newObj.CreateTextFile("C:\test.txt", true) 第二個(gè)參表示目標(biāo)文件存在時(shí)是否覆蓋
       *  file.Write("寫(xiě)入內(nèi)容");  file.Close();
       */
      var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
      // GetFile(path) 方法從磁盤(pán)獲取一個(gè)文件并返回。
      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代碼

復(fù)制代碼代碼如下:

　　一個(gè) 簡(jiǎn)單、輕便、快捷的用JS代碼來(lái)判斷文件大小的方法就OK了，至于ActiveXObject對(duì)象感興趣的可以去深究，它可以根據(jù)入?yún)⒌牟煌祷夭煌膶?duì)象，通常該對(duì)象的功能和作用也是非常有用和強(qiáng)大的。

本文內(nèi)容就到這里了，是不是非常簡(jiǎn)單實(shí)用的代碼呢，希望大家能夠喜歡。

您可能感興趣的文章:

相關(guān)文章

基于js判斷瀏覽器是否支持webGL
這篇文章主要介紹了基于js判斷瀏覽器是否支持webGL,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-04-04
在JavaScript里防止事件函數(shù)高頻觸發(fā)和高頻調(diào)用的方法
這篇文章主要介紹了在JavaScript里防止事件函數(shù)高頻觸發(fā)和高頻調(diào)用的方法,本文方法從Underscore.js中摘錄而來(lái),需要的朋友可以參考下
2014-09-09
js生成1到100的隨機(jī)數(shù)最簡(jiǎn)單的實(shí)現(xiàn)方法
在本篇文章里小編給大家整理了關(guān)于js生成1到100的隨機(jī)數(shù)最簡(jiǎn)單的實(shí)現(xiàn)方法，有需要的朋友們可以學(xué)習(xí)下。
2020-02-02
JavaScript?設(shè)計(jì)模式中的代理模式詳解
這篇文章主要介紹了JavaScript?設(shè)計(jì)模式中的代理模式詳解,代理模式，代理是一個(gè)對(duì)象，它可以用來(lái)控制對(duì)另一個(gè)對(duì)象的訪問(wèn),更多相關(guān)內(nèi)容需要的朋友可以參考一下
2022-07-07
JS運(yùn)動(dòng)特效之完美運(yùn)動(dòng)框架實(shí)例分析
這篇文章主要介紹了JS運(yùn)動(dòng)特效之完美運(yùn)動(dòng)框架,結(jié)合實(shí)例形式分析了javascript針對(duì)運(yùn)動(dòng)中的元素屬性檢測(cè)與判斷相關(guān)操作技巧,需要的朋友可以參考下
2018-01-01
js計(jì)算字符串長(zhǎng)度包含的中文是utf8格式
使用js寫(xiě)的計(jì)算字符串長(zhǎng)度且其中中文是utf8格式的，具體的實(shí)現(xiàn)如下，感興趣的朋友可以參考下
2013-10-10
JavaScript?Echarts柱狀圖label優(yōu)化中問(wèn)題針對(duì)講解
這篇文章主要介紹了JavaScript?Echarts柱狀圖label優(yōu)化中問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧
2022-12-12
JavaScript 中.call()的使用小結(jié)
.call()是JavaScript中用于顯式設(shè)置函數(shù)執(zhí)行上下文并立即調(diào)用該函數(shù)的方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2024-11-11
這篇文章主要給大家介紹了關(guān)于JSONPath使用指南和實(shí)用技巧的相關(guān)資料,JsonPath,類(lèi)似于XPath在XML中的作用,其提供了對(duì)格式Json數(shù)據(jù)的解析能力,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-08-08