网页表单的 可以用来上传档案,但是要怎么限制使用者只能上传指定的档案类型呢?这次我们来学学使用 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"><</span><span
class="Statement">script</span><span class="Identifier"> </span><span
class="Type">type</span><span class="Identifier">=</span><span
class="Constant">"text/javascript"</span><span class="Identifier">
</span><span class="Type">language</span><span
class="Identifier">=</span><span
class="Constant">"javascript"</span><span
class="Identifier">></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">".jpg"</span><span class="Special">,
</span><span class="Constant">".png"</span><span
class="Special">, </span><span
class="Constant">".gif"</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">'.'</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"> <
</span>0)<span class="Special"> </span><span
class="Identifier">{</span>
<span class="Special"> </span><span class="Statement">alert</span>(<span
class="Constant">"档案类型错误,可接受的副档名有:"</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">></span>
</span>
这段 JavaScript 定义了一个用来检查副档名的 checkfile 函数,在网页中加入这段程式码接着在需要检查档案类型的 中设定 onchange 事件处理程式。
<span class="Identifier"><</span><span
class="Statement">form</span><span class="Identifier"> </span><span
class="Type">method</span><span class="Identifier">=</span><span
class="Constant">"post"</span><span
class="Identifier">></span>
<span class="Identifier"><</span><span
class="Statement">input</span><span class="Identifier"> </span><span
class="Type">type</span><span class="Identifier">=</span><span
class="Constant">"file"</span><span class="Identifier">
</span><span class="Special">onchange="</span><span
class="Special">checkfile</span>(<span class="Identifier">this</span>)<span
class="Special">;</span><span class="Special">"</span><span
class="Identifier"> /></span>
<span class="Identifier"><</span><span
class="Statement">input</span><span class="Identifier"> </span><span
class="Type">type</span><span class="Identifier">=</span><span
class="Constant">"submit"</span><span
class="Identifier">></span>
<span class="Identifier"><!--</span--><span
class="Statement">form</span><span
class="Identifier">></span></span>