如何用一張圖片代替 '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隱藏掉,而是把它"變透明了",然后覆蓋在圖片上面 ╭(；ŎдŎ)╮

　　簡直鬼斧神工,我都沒想到這點.... 不失為一個好方案 !!

　　言而總之,實現的方法有很多,肯定還有其他的許多方法,不同的場景采取什么樣的方案,就需要我們去仔細斟酌了。