【input】檔案上傳控制元件隱藏和前端型別限制
阿新 • • 發佈:2019-02-13
1. 如何隱藏檔案上傳控制元件
使用 CSS3 的 opacity 屬性 設定 透明度為 0(隱藏),詳情參看 說明
並使用絕對定位 position:absolute
其父標籤 使用相對定位 position:relative
<a href="javascript:void(0);" class="btn btn-default btn-sm" id="special-period-import" style="position:relative"> <input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" style="opacity:0;position:absolute"/> <i class="fa fa-plus"></i> 匯入 </a>
2. 前端控制 file 選擇型別
通過 accept 屬性 ,多個用逗號隔開,如上的栗子,預設只可以選擇 xls 和 xlsx 型別的檔案 ,當然即使做了如此設定 ,還是可以選擇其他型別 ,所以需要後臺進一步做控制;
相關型別限制 可參考
部落格