亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

小技巧|上傳文件時,如何在資源管理器中過濾非指定格式的文件

標簽:
Html/CSS

在我们做文件上传功能时,比如说导入Excel功能,通常需要限定用户只能导入Excel文件,对其他文件要进行过滤,一种做法是用户在选择文件时可以选择任何文件,只是在选择后触发change事件后再判断文件后缀格式,这种方法的麻烦之处在于要自己写代码判断。如何在打开资源管理器中就过滤非Excel文件呢?如下图所示。

上面在打开的文件选择资源管理器中,只显示了Excel文件,其他文件格式都不能选择。

实现这种效果的关键,就是应用 inputaccept属性。accept 属性只能与 <input type="file"> 配合使用。它规定能够通过文件上传进行提交的文件类型,它的取值是用逗号隔开的 MIME 类型列表。下面就是上述功能的实现:

<input type="file" id="upFile" accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">

也可以过滤图片,如

<input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />

上面的写法是只能选择gif和jpeg格式的图片。更多用法请阅读MDN

这种方式很方便,省去了麻烦的文件格式校验,然而,accept 属性并不会验证选中文件的类型. 他只是为开发这提供了一种引导用户做出期望行为的方式而已, 用户还是有办法绕过浏览器的限制。因此, 在服务器端进行文件类型验证是必不可少的。

點擊查看更多內容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
  • 推薦
  • 評論
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消