zoukankan      html  css  js  c++  java
  • 如何用一张图片代替 '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隐藏掉,而是把它"变透明了",然后覆盖在图片上面 ╭(;ŎдŎ)╮

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

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

  • 相关阅读:
    poj 2728 Desert King(最小比率生成树,迭代法)
    HDU
    hud 2089 不要62 (数位dp)
    食物链(带全并查集)
    docNet基础学完感想
    zoj 1081 (改进的弧长算法)(转)
    zoj 1962 How Many Fibs?(字符串化为数字处理)
    zoj 1109 zoj 1109 Language of FatMouse(字典树)
    iOS开发网络数据之AFNetworking使用
    iOS 使用AFNetworking
  • 原文地址:https://www.cnblogs.com/canday/p/6498815.html
Copyright © 2011-2022 走看看