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

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

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

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

将这个玩意:



换成这样的:



当时我的解决方案是这样的:

　　<input type="file" style="display:none" name="" id="">

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

<script>

　　document.querySelector('img').onclick = function(){

　　　　document.querySelector('input[type=file]').click();

　　}

</script>

我的意图是将input标签隐藏,然后给img注册点击事件的同时给input挂载点击事件,触发input:file的默认行为。但这个方案遭到了面试老师的‘一票否决’。

他的理由是：“当你把标签隐藏后，你就无法给他注册事件了，因为你看不到他！！”

对于这个理论我实在不敢苟同,就算标签被隐藏掉,他依旧存在在DOM树上并没有消失,当然可以对它进行操作,关于这一点我们起了一些观点上的争执。

好吧,当时我确实没有固执自己的意见,毕竟跟面试老师起争执对我没有任何好处 ฅ۶ó ﹏ò
当后来面试官问到如何点击文本让input获取焦点的时候我才恍然明白他的真实意图,他应该是想让我用这种方法:

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

　　<!--用for属性绑定file控件--> 　　
　　<label for="file">　　
　　　　　　
　　　　<img src="diy图片路径" alt=""> 　　
　　
　　</label> 　　

</form>

label 是 HTML定义的一个标签,他的 for 属性的值等于它相关元素的 id 的值时，可以进行功能的捆绑(简单点说就是你点label标签就相当于点击它所绑定的input)。
那有了这个东西想要实现这个功能就不能再简单了!!!至于样式,清掉就OK啦!
不得不说,这种处理方法无论从语义话还是效率上都要比直接操作DOM好的多!!!
但是,作为一名开发者,一种功能实现肯定有多种处理办法,不去验证别人的方案就给予否决的话....

后续: 2017.03.10........

　　今天跟一位好朋友聊到这个话题的时候,她又提供了另外一种思路,很是巧妙~~
代码如下:

<form style="position:relative">

<input type="file" style="position:absolute;opacity:0;" >

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

</form>

　　她并没有将input隐藏掉,而是把它"变透明了",然后覆盖在图片上面 ╭(；ŎдŎ)╮

　　简直鬼斧神工,我都没想到这点.... 不失为一个好方案 !!

　　言而总之,实现的方法有很多,肯定还有其他的许多方法,不同的场景采取什么样的方案,就需要我们去仔细斟酌了。