如何用一张图片代替 'input:file' 上传本地文件??

Posted 2020-09-02

　　今天去面试,碰到了一道题,也许是因为紧张或者喝水喝多了,一时竟然没有转过弯来,回来之后一细想原来这么简单,哭笑不得,特此记录一下!

原题是这样的:  如何用一张图片代替 ‘input:file‘ 上传本地文件??

因为默认的 <input type=‘file‘> 上传文件控件样式特别丑,需要换成自定义的图片,如何实现这个功能??

也就是,将这个玩意:

换成这样的:

当时我还讲了一下label与input之间的绑定关系,问到这个的时候竟然脑袋短路一时没想到label这玩意儿??label作为一个双标签里面内容既然可以是文字那自然也可以是img啊!!

<label> 是 HTMML定义的一个标签,他的 for 属性等于它相关元素的 id 元素时，可以进行功能的捆绑(简单点说就是你点label标签就相当于点击它所绑定的input)。

那有了这个东西想要实现这个功能就不能再简单了!!!

代码如下:

<form>
　　<input type="file" id="file">

  　　  <label for="file">　　<!--用for属性绑定file控件-->

　　　　　　<img src="diy图片路径"  >

　　　　</label>

</form>

看到没,就是这么简单,通过这件事体现出一个很重要的道理,活学活用啊同志们~~