HTML中input:file标签的使用

如何简单的使用

• 问题的由来

---

第一次看到别人在写网页，能够上传文件？好高大上！自己就在想这是怎么实现的？虽然当时没想出来也没有去百度了，但后来一次项目中我就需要处理文件上传这个操作。

• 了解

---

些项目的时候我也没去百度，因为当时一个页面一位学长也写了文件上传。我就翻他的代码，一看，原来是这个东西

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

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