卡卡網(wǎng)

在Web應(yīng)用中，我們使用tag保存用戶輸入，主要tag包含textbox、textarea和input file等等，然而輸入數(shù)據(jù)的用戶可以上傳任何文件格式，所以我們需要在客戶端和服務(wù)器端驗證它。 我們作為開發(fā)人員知道應(yīng)該在相應(yīng)的網(wǎng)頁上上傳哪個文件擴展名或文件類型。 因此，文件驗證應(yīng)該是必要的，為此，我們需要知道上傳文件的擴展名。

在本文中，我們將學(xué)習(xí)如何在javascript（客戶端）中獲取文件擴展名，以便我們對其進(jìn)行驗證。 我們可以使用兩種不同的方法來實現(xiàn)。

兩種獲得文件擴展名的方法：

1. 使用正則表達(dá)式（Regex）獲得文件類型
2. 使用 split() 和 pop() 方法獲得文件類型

HTML標(biāo)記：

這里我們添加一個表單標(biāo)簽，帶有文件上傳控件和按鈕標(biāo)簽。 在按鈕單擊時，我們調(diào)用 getFileExtention() 方法，該方法提供警報消息并顯示上載文件的擴展名。 代碼如下所示。

<form action="/uploadFile">
  <input id="myFile" type="file" name="file">
  <button onclick="fnGetExtension()">獲得擴展名</button>
</form>

方法1：使用正則表達(dá)式（Regex）獲取文件擴展名

這里我們有正則表達(dá)式（Regex）值，它給我們文件擴展名。 即使URL包含 ?foo=123 查詢字符串或 #hash 值，此正則表達(dá)式也可用于從URL中提取文件擴展名。

Javascript代碼：

function fnGetExtension() {
  //通過id獲得文件輸入元件
  var fileInput = document.getElementById('myFile');
  //獲得文件名
  var fileName = fileInput.files[0].name;

  //文件擴展名的正則表達(dá)式
  var patternFileExtension = /\.([0-9a-z]+)(?:[\?#]|$)/i;

  //獲得文件擴展名
  var fileExtension = (fileName).match(patternFileExtension);
  alert(fileExtension);
}

execcodegetcode

方法2：使用 split() 和 pop() 方法獲得文件擴展名

這里我們使用 split() 方法和使用一個 點 (.) 來分割， 以及使用 pop() 方法獲得文件擴展名。

Javascript代碼：

function fnGetExtension() {
  //通過id獲得文件輸入元件
  var fileInput = document.getElementById('myFile');
  //獲得文件名
  var fileName = fileInput.files[0].name;

  //獲得文件擴展名 
  var fileExtension = fileName.split('.').pop();
  alert(fileExtension);
}

execcodegetcode

結(jié)論：

這里我們已經(jīng)展示了如何在javascript中使用和不使用正則表達(dá)式來獲取文件擴展名，我們可以在上傳文件時用于文件驗證。

#知識擴展

JavaScript split() 方法

定義和用法

split() 方法用于把一個字符串分割成字符串?dāng)?shù)組。

語法

stringObject.split(separator,howmany)

返回值

一個字符串?dāng)?shù)組。該數(shù)組是通過在 separator 指定的邊界處將字符串 stringObject 分割成子串創(chuàng)建的。返回的數(shù)組中的字串不包括 separator 自身。

但是，如果 separator 是包含子表達(dá)式的正則表達(dá)式，那么返回的數(shù)組中包括與這些子表達(dá)式匹配的字串（但不包括與整個正則表達(dá)式匹配的文本）。

提示和注釋

注釋：如果把空字符串 ("") 用作 separator，那么 stringObject 中的每個字符之間都會被分割。

注釋：String.split() 執(zhí)行的操作與 Array.join 執(zhí)行的操作是相反的。

JavaScript pop() 方法

定義和用法

pop() 方法用于刪除并返回數(shù)組的最后一個元素。

語法

arrayObject.pop()

返回值

arrayObject 的最后一個元素。

說明

pop() 方法將刪除 arrayObject 的最后一個元素，把數(shù)組長度減 1，并且返回它刪除的元素的值。如果數(shù)組已經(jīng)為空，則 pop() 不改變數(shù)組，并返回 undefined 值。

標(biāo)簽: 文件擴展名