首頁 web前端 js教程 在js中如何實作判斷檔案類型大小

在js中如何實作判斷檔案類型大小

Jun 13, 2018 pm 05:56 PM
js 判斷 大小 提示 文件類型

下面我就為大家分享一篇js判斷檔案類型大小並給出提示的實作方法,具有很好的參考價值,希望對大家有幫助。

上傳檔案是工作中常用的功能,不同的場景對不同的檔案類型和檔案大小都有不同的需求:

<form id="uploadForm" method="post" class="layui-form">
  <p class="layui-form-item">
  <label class="layui-form-label">名称</label>
  <p class="layui-input-block">
   <input type="text" name="name" required lay-verify="required"
   placeholder="请输入文件名" autocomplete="off" class="layui-input">
  </p>
  </p>
  <p class="layui-form-item">
  <label class="layui-form-label">资料类型:</label>
  <p class="layui-input-block">
   <select name="datatypeid" id="datatypeid"></select>
  </p>
  <input type="hidden" id="yincang">
  </p>
  <p class="layui-form-item">
  <label class="layui-form-label">上传文件</label>
  <p class="layui-input-block">
   <input class="layui-input" type="file" name="file" onchange="fileChange(this);"/>
  </p>
  </p>
  <p class="layui-form-item">
  <p class="layui-input-block">
   <input type="button" class="layui-btn" value="上传"
   onclick="upload()" />
  </p>
  </p>
 </form>
登入後複製

js方法:

<script type="text/javascript">
 var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
 function fileChange(target, id) {
  var fileSize = 0;
  var filetypes = [ ".doc", ".docx" ];//这里设置接受的文件类型
  var filepath = target.value;
  var filemaxsize = 1024 * 10;//接受的文件最大10M 
  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>
登入後複製

上面是我整理給大家的,希望今後會對大家有幫助。

相關文章:

在JavaScript中如何判斷NaN

#如何使用jQuery實作滑鼠響應式透明度漸層動畫效果

在jQuery中如何實作滑鼠響應式淘寶動畫效果

以上是在js中如何實作判斷檔案類型大小的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

谷歌瀏覽器提示此標籤頁的內容正在被分享怎麼辦? 谷歌瀏覽器提示此標籤頁的內容正在被分享怎麼辦? Mar 13, 2024 pm 05:00 PM

  Google瀏覽器提示此標籤頁的內容正在被分享怎麼辦?我們在使用Google瀏覽器開啟新標籤的時候有時會遇到提示此標籤頁的內容正在被分享,那麼這是怎麼回事?以下就讓本站來為使用者來仔細的介紹一下谷歌瀏覽器提示此標籤頁的內容正在被共享的問題解析吧。  Google瀏覽器提示此標籤頁的內容正在被共享解決方法  1、打開谷歌瀏覽器,在瀏覽器右上角可以看到三個點「自訂和控制Googlechrome」用滑鼠點擊圖示進行圖示。  2、點擊後,Google瀏覽器的選單視窗將彈出到下面,滑鼠將移動到「更多工具

et是什麼文件類型「必看:et的文件開啟方法」 et是什麼文件類型「必看:et的文件開啟方法」 Feb 07, 2024 am 09:48 AM

收到文件格式是.et的文件如何開啟?朋友同事間發送文件,收到的卻是.et後綴的文件。無法使用預設程式開啟。原來.et是WPS預設儲存的表格檔案格式,MicrosoftExcel是打不開的,如何在不安裝WPS的情況下開啟這個文件呢?手機接收到檔案後,可以選擇"用其他應用程式開啟",然後選擇上傳到郵箱。以QQ郵箱為例,可以透過發送一封郵件給自己的方式上傳。如果是電腦端接收的文件,開啟郵件信箱上傳即可。上傳到郵箱後,點選附件預覽即可預覽.et檔案格式的檔案了。這樣避免了為了開啟一個檔案而安裝軟體。當然為

建議:優秀JS開源人臉偵測辨識項目 建議:優秀JS開源人臉偵測辨識項目 Apr 03, 2024 am 11:55 AM

人臉偵測辨識技術已經是一個比較成熟且應用廣泛的技術。而目前最廣泛的網路應用語言非JS莫屬,在Web前端實現人臉偵測辨識相比後端的人臉辨識有優勢也有弱勢。優點包括減少網路互動、即時識別,大大縮短了使用者等待時間,提高了使用者體驗;弱勢是:受到模型大小限制,其中準確率也有限。如何在web端使用js實現人臉偵測呢?為了實現Web端人臉識別,需要熟悉相關的程式語言和技術,如JavaScript、HTML、CSS、WebRTC等。同時也需要掌握相關的電腦視覺和人工智慧技術。值得注意的是,由於Web端的計

股票分析必備工具:學習PHP和JS繪製蠟燭圖的步驟 股票分析必備工具:學習PHP和JS繪製蠟燭圖的步驟 Dec 17, 2023 pm 06:55 PM

股票分析必備工具:學習PHP和JS繪製蠟燭圖的步驟,需要具體程式碼範例隨著網路和科技的快速發展,股票交易已成為許多投資者的重要途徑之一。而股票分析是投資人決策的重要一環,其中蠟燭圖被廣泛應用於技術分析。學習如何使用PHP和JS繪製蠟燭圖將為投資者提供更多直觀的信息,幫助他們更好地做出決策。蠟燭圖是一種以蠟燭形狀來展示股票價格的技術圖表。它展示了股票價格的

如何使用PHP和JS創建股票蠟燭圖 如何使用PHP和JS創建股票蠟燭圖 Dec 17, 2023 am 08:08 AM

如何使用PHP和JS創建股票蠟燭圖股票蠟燭圖是股票市場中常見的技術分析圖形,透過繪製股票的開盤價、收盤價、最高價和最低價等數據,幫助投資者更直觀地了解股票的價格波動情形。本文將教你如何使用PHP和JS創建股票蠟燭圖,並附上具體的程式碼範例。一、準備工作在開始之前,我們需要準備以下環境:1.一台運行PHP的伺服器2.一個支援HTML5和Canvas的瀏覽器3

如何在VirtualBox中增加磁碟大小[指南] 如何在VirtualBox中增加磁碟大小[指南] Mar 17, 2024 am 10:10 AM

我們經常遇到預定義磁碟大小沒有空間容納更多資料的情況?如果您在稍後階段需要更多的虛擬機器硬碟空間,則必須擴充虛擬硬碟和分割區。在這篇文章中,我們將看到如何在VirtualBox中增加磁碟大小。增加VirtualBox中的磁碟大小重要的是要注意,您可能希望在執行這些操作之前備份您的虛擬硬碟文件,因為總是有可能出錯。有備份總是一個好的做法。然而,該過程通常運作良好,請確保在繼續之前關閉您的機器。有兩種方法可以增加VirtualBox中的磁碟大小。使用圖形使用者介面擴充VirtualBox的磁碟大小使用CL

PHP與JS開發技巧:掌握繪製股票蠟燭圖的方法 PHP與JS開發技巧:掌握繪製股票蠟燭圖的方法 Dec 18, 2023 pm 03:39 PM

隨著網路金融的快速發展,股票投資已經成為了越來越多人的選擇。而在股票交易中,蠟燭圖是常用的技術分析方法,它能夠顯示股票價格的變動趨勢,幫助投資人做出更精準的決策。本文將透過介紹PHP和JS的開發技巧,帶領讀者了解如何繪製股票蠟燭圖,並提供具體的程式碼範例。一、了解股票蠟燭圖在介紹如何繪製股票蠟燭圖之前,我們首先需要先了解什麼是蠟燭圖。蠟燭圖是由日本人

百度貼吧app提示操作太頻繁怎麼回事 百度貼吧app提示操作太頻繁怎麼回事 Apr 01, 2024 pm 05:06 PM

百度貼吧app提示操作過於頻繁這種提示通常是為了維護平台的正常運作和用戶體驗,以防止惡意刷屏、廣告刷帖等不當行為,具體的處理方法各位可以看小編分享教程哦。百度貼吧app提示操作過於頻繁處理方法分享1、當系統提示【操作太頻繁】的時候,我們需要等待一段時間,如果著急可以先去做一點別的事情,一般等待一會兒之後,這個提示信息就會自動消失,這時候我們就可以正常使用了。 2.如果等了很久之後,它還是顯示【操作過於頻繁】,我們可以嘗試去貼吧應急吧、貼吧意見反饋吧等官方貼吧,發帖反饋這種現象,請求官方人員解決。 3、

See all articles