【教學文章】input 使用 accept 限制上傳檔案類型-2024年推薦TOP5 專業台北RWD網頁設計-英傑銳網路數位

22 2018.08

【教學文章】input 使用 accept 限制上傳檔案類型

文章日期：2018-08-22 文章分享：vip 瀏覽人數：16,524

字體大小：

大中小

網頁表單的可以用來上傳檔案，但是要怎麼限制使用者只能上傳指定的檔案類型呢？這次我們來學學使用 accept 屬性選擇可接受的檔案類型。

1. 指定副檔名

accept 可以用副檔名來指定可接受的檔案類型，例如只接受 .pdf 的檔案：

    
<input accept=".pdf" type="file" />

如果要可接受多種副檔名，則須使用逗號分開，例如只接受 .pdf 與 .xls 兩種檔案格式：

    
<input accept=".pdf,.xls" type="file" />

2. 指定網路媒體形式

accept 亦可使用網路媒體形式來指定檔案類型，例如只接受影像圖檔（包含 .jpg、.png、.gif 等圖檔）：

    
<input accept="image/*" type="file" />

只接受網頁檔（.htm 與 .html 等網頁檔）：

    
<input accept="text/html" type="file" />

只接受影片檔（包含 .avi、.mp4、.mpg 等影片檔）：

    
<input accept="video/*" type="file" />

只接受聲音檔（包含 .mp3、.wav 等聲音檔）：

      
<input accept="audio/*" type="file" />

也可使用逗號分隔多種檔案格式，例如只接受圖檔、.pdf 與 .xls 檔：

      
<input accept="image/*,.pdf,.xls" type="file" />

使用 JavaScript 檢查副檔名

除了 accept 以外，也能使用 JavaScript 來檢查副檔名。

    
<span class="Identifier">&lt;</span><span
class="Statement">script</span><span class="Identifier"> </span><span
class="Type">type</span><span class="Identifier">=</span><span
class="Constant">&quot;text/javascript&quot;</span><span class="Identifier">
</span><span class="Type">language</span><span
class="Identifier">=</span><span
class="Constant">&quot;javascript&quot;</span><span
class="Identifier">&gt;</span>
<span class="Identifier">function</span><span class="Special">
checkfile</span>(<span class="Special">sender</span>)<span class="Special">
</span><span class="Identifier">{</span>

<span class="Special"> </span><span class="Comment">// 可接受的附檔名</span>
<span class="Special"> </span><span class="Identifier">var</span><span
class="Special"> validExts = </span><span class="Statement">new</span><span
class="Special"> </span><span class="Type">Array</span>(<span
class="Constant">&quot;.jpg&quot;</span><span class="Special">,
</span><span class="Constant">&quot;.png&quot;</span><span
class="Special">, </span><span
class="Constant">&quot;.gif&quot;</span>)<span class="Special">;</span>

<span class="Special"> </span><span class="Identifier">var</span><span
class="Special"> fileExt = sender.value;</span>
<span class="Special"> fileExt = fileExt.substring</span>(<span
class="Special">fileExt.lastIndexOf</span>(<span
class="Constant">&#39;.&#39;</span>))<span class="Special">;</span>
<span class="Special"> </span><span class="Statement">if</span><span
class="Special"> </span>(<span
class="Special">validExts.indexOf</span>(<span
class="Special">fileExt</span>)<span class="Special"> &lt;
</span>0)<span class="Special"> </span><span
class="Identifier">{</span>
<span class="Special"> </span><span class="Statement">alert</span>(<span
class="Constant">&quot;檔案類型錯誤，可接受的副檔名有：&quot;</span><span class="Special"> +
validExts.toString</span>())<span class="Special">;</span>
<span class="Special"> sender.value = </span><span
class="Statement">null</span><span class="Special">;</span>
<span class="Special"> </span><span class="Statement">return</span><span
class="Special"> </span><span class="Constant">false</span><span
class="Special">;</span>
<span class="Special"> </span><span class="Identifier">}</span>
<span class="Special"> </span><span class="Statement">else</span><span
class="Special"> </span><span class="Statement">return</span><span
class="Special"> </span><span class="Constant">true</span><span
class="Special">;</span>
<span class="Identifier">}</span>
<span class="Identifier"><!--</span--><span
class="Statement">script</span><span class="Identifier">&gt;</span>
</span>

這段 JavaScript 定義了一個用來檢查副檔名的 checkfile 函數，在網頁中加入這段程式碼接著在需要檢查檔案類型的中設定 onchange 事件處理程式。

    
<span class="Identifier">&lt;</span><span
class="Statement">form</span><span class="Identifier"> </span><span
class="Type">method</span><span class="Identifier">=</span><span
class="Constant">&quot;post&quot;</span><span
class="Identifier">&gt;</span>
<span class="Identifier">&lt;</span><span
class="Statement">input</span><span class="Identifier"> </span><span
class="Type">type</span><span class="Identifier">=</span><span
class="Constant">&quot;file&quot;</span><span class="Identifier">
</span><span class="Special">onchange=&quot;</span><span
class="Special">checkfile</span>(<span class="Identifier">this</span>)<span
class="Special">;</span><span class="Special">&quot;</span><span
class="Identifier"> /&gt;</span>
<span class="Identifier">&lt;</span><span
class="Statement">input</span><span class="Identifier"> </span><span
class="Type">type</span><span class="Identifier">=</span><span
class="Constant">&quot;submit&quot;</span><span
class="Identifier">&gt;</span>
<span class="Identifier"><!--</span--><span
class="Statement">form</span><span
class="Identifier">&gt;</span></span>

文章標籤

文章分類及檢索

網頁設計新知