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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何用一张图片代替 'input:file' 上传本地文件??相关的知识,希望对你有一定的参考价值。

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

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

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

也就是,将这个玩意:

技术分享

换成这样的:

技术分享

当时我还讲了一下labelinput之间的绑定关系,问到这个的时候竟然脑袋短路一时没想到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>

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

 


以上是关于如何用一张图片代替 'input:file' 上传本地文件??的主要内容,如果未能解决你的问题,请参考以下文章

如何用Matlab建立直角坐标系

如何用python下载一张图片

c# winform如何用一个图片来代替一个窗体的关闭按钮?

如何用层(DIV)给一张图片上的固定文字添加超链接?

如何用层(DIV)给一张图片上的固定文字添加超链接?

如何用PS从一张图片上截取一个矩形区域到另一张图片上