如何简单的使用
- 问题的由来
第一次看到别人在写网页,能够上传文件?好高大上!自己就在想这是怎么实现的?虽然当时没想出来也没有去百度了,但后来一次项目中我就需要处理文件上传这个操作。
- 了解
些项目的时候我也没去百度,因为当时一个页面一位学长也写了文件上传。我就翻他的代码,一看,原来是这个东西
<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事件。
- 可以了!
如果还存在疑问,可以看一下这篇博文(我就是看这篇文章理解的)。