JavaScript判斷FileUpload控件上傳文件類型

更新時間：2022年02月23日 16:57:22 投稿：lijiao

在CS后臺代碼中獲取FileUpload控件上傳文件的類型是比較容易的！那么，能否在客戶端通過JavaScript腳本判斷FileUpload上傳文件類型呢？答案是可以的，下面通過一個小例子為大家展示

為了代碼變得更加簡捷，筆者使用了正則表達式來獲取文件擴展名，如果讀者對正則表達式不太了解或者從來沒有接觸過，請馬上惡補一下吧！畢竟它非常重要，大多數(shù)的編程語言都支持正則表達式。

大家都知道，后臺獲取FileUpload擴展名方法：

string ext = Path.GetExtension(fu.PostedFile.FileName);

JS判斷FileUpload控件上傳文件的擴展名：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title>JS判斷文件類型-樂豬網(wǎng)</title>
 <script type="text/javascript">
 function CheckFileUpload() {
  var obj = document.getElementById('fu');
  if (obj.value == "") {
  alert("請選擇要上傳的文件！");
  return false;
  }
  var stuff = obj.value.match(/^(.*)(\.)(.{1,8})$/)[3];
  if (stuff != "zip") {
  alert("文件類型不正確，請選擇.zip文件！");
  return false;
  }
  return true;
 }
 </script>
</head>
<body>
 <form id="form1" runat="server">
 <div>
 <asp:FileUpload ID="fu" runat="server" />
 <asp:Button ID="btnSave" runat="server" Text="保存"
 OnClientClick="return CheckFileUpload();" />
 </div>
 </form>
</body>
</html>

FileUpload 實例效果圖：

更多精彩內(nèi)容請參考專題《ajax上傳技術匯總》，《javascript文件上傳操作匯總》和《jQuery上傳操作匯總》進行學習。

以上就是JS判斷FileUpload控件上傳文件的擴展名的實現(xiàn)方法，希望對大家的學習有所幫助。

您可能感興趣的文章:

bootstrap實現(xiàn)動態(tài)進度條效果
本篇文章主要介紹了bootstrap實現(xiàn)動態(tài)進度條效果，進度條可以加強應用的用戶體驗效果，看到數(shù)字，具有一定的參考價值，有興趣的可以了解一下。
2017-03-03
用js判斷是否為360瀏覽器的實現(xiàn)代碼
這篇文章主要介紹了用js判斷是否為360瀏覽器的實現(xiàn)代碼,有時候我們需要判斷是否為360瀏覽器，包括百度聯(lián)盟后臺就有這樣的提示需要的朋友可以參考下
2015-01-01
JavaScript Accessor實現(xiàn)說明
關于Getter與Setter大家一定不會陌生,下面簡單介紹幾種我所知道的在JavaScript中實現(xiàn)G/S的方法.
2010-12-12
JS Promise axios 請求結(jié)果后面的.then() 是什么意思
本文主要介紹了JS Promise axios 請求結(jié)果后面的 .then() 是什么意思，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-01-01
JavaScript初學者應注意的七個細節(jié)小結(jié)
每種語言都有它特別的地方，對于JavaScript來說，使用var就可以聲明任意類型的變量，這門腳本語言看起來很簡單，然而想要寫出優(yōu)雅的代碼卻是需要不斷積累經(jīng)驗的
2012-01-01
純JS實現(xiàn)的讀取excel文件內(nèi)容功能示例【支持所有瀏覽器】
這篇文章主要介紹了純JS實現(xiàn)的讀取excel文件內(nèi)容功能,結(jié)合實例形式分析了基于js相關插件進行Excel文件讀取的相關操作技巧,需要的朋友可以參考下
2018-06-06
老生常談JavaScript 正則表達式語法
下面小編就為大家?guī)硪黄仙Ｕ凧avaScript 正則表達式語法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-08-08
（推薦一個超好的JS函數(shù)庫）S.Sams Lifexperience ScriptClassLib
（推薦一個超好的JS函數(shù)庫）S.Sams Lifexperience ScriptClassLib...
2007-04-04
如何全局重寫小程序Page函數(shù)wx對象詳解
這篇文章主要給大家介紹了關于如何全局重寫小程序Page函數(shù)wx對象的相關資料,文中通過實例代碼介紹的非常詳細,對大家學習或者使用小程序具有一定的參考學習價值,需要的朋友可以參考下
2022-08-08
使用TypeScript接口優(yōu)化數(shù)據(jù)結(jié)構的示例詳解
在現(xiàn)代軟件開發(fā)中,數(shù)據(jù)結(jié)構的設計至關重要,它直接影響到程序的性能和可維護性,TypeScript 作為一種靜態(tài)類型的超集,為 JavaScript 帶來了類型系統(tǒng),本文將探討如何利用 TypeScript 的接口（Interfaces）來優(yōu)化數(shù)據(jù)結(jié)構,需要的朋友可以參考下
2024-09-09