HTML中input:file標籤的使用
阿新 • • 發佈:2018-12-23
如何簡單的使用
- 問題的由來
第一次看到別人在寫網頁,能夠上傳檔案?好高大上!自己就在想這是怎麼實現的?雖然當時沒想出來也沒有去百度了,但後來一次專案中我就需要處理檔案上傳這個操作。
- 瞭解
些專案的時候我也沒去百度,因為當時一個頁面一位學長也寫了檔案上傳。我就翻他的程式碼,一看,原來是這個東西
<input type="file" accept="image/png,image/jpeg,image/gif" name="myPic" id="thePic">
萬萬沒想到居然是這個東西,很簡單的嘛!
但在實際使用的時候並不只是寫個標籤而已,你需要裝飾。
- 使用
這是標籤原始的樣子
這是什麼鬼?low爆了嘛!
所以說,我們需要對他的樣式進行裝飾。。
解決方案
- 將其設定為透明,設定寬高覆蓋到需要用的地方。
- 使用label標籤繫結input:file,點選label標籤時上傳檔案,只需要裝飾label標籤即可,也需要將input標籤隱藏透明
不用label標籤時,像這樣,設定透明像這樣,當點選紅方框內區域的時候彈出上傳檔案視窗。
使用label標籤時也很簡單,就把label標籤看作是一個按鈕即可。
又來一個問題
怎麼檢測已經上傳了檔案呢?因為需要檢測使用者上傳檔案並進行一些操作,比如說檔案大小合不合適內容對不對
- 用什麼事件來監聽使用者上傳檔案呢?
- 對了,可以檢測input:file的input事件。
- 可以了!
如果還存在疑問,可以看一下這篇博文(我就是看這篇文章理解的)。