如何簡單的使用

• 問題的由來

第一次看到別人在寫網頁，能夠上傳檔案？好高大上！自己就在想這是怎麼實現的？雖然當時沒想出來也沒有去百度了，但後來一次專案中我就需要處理檔案上傳這個操作。

• 瞭解

些專案的時候我也沒去百度，因為當時一個頁面一位學長也寫了檔案上傳。我就翻他的程式碼，一看，原來是這個東西

<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事件。
  • 可以了！
    

  如果還存在疑問，可以看一下這篇博文（我就是看這篇文章理解的）。