首页  >  问答  >  正文

将输入类型=文件替换为图像

像很多人一样,我想自定义丑陋的 input type=file,并且我知道如果没有一些 hack 和/或 javascript 就无法完成。但是,问题是,就我而言,上传文件按钮仅用于上传图像(jpeg|jpg|png|gif),所以我想知道是否可以使用“clickable”图像与输入类型文件完全相同(显示对话框,并在提交的页面上显示相同的 $_FILE)。

我在这里找到了一些解决方法,这也很有趣(但不适用于 Chrome =/)。

当您想为文件按钮添加一些样式时,你们会怎么做?如果您对此有任何观点,请点击回答按钮;)

P粉567281015P粉567281015393 天前692

全部回复(1)我来回复

  • P粉158473780

    P粉1584737802023-10-14 10:09:12

    这对我来说非常有效:

    .image-upload>input {
      display: none;
    }
    <div class="image-upload">
      <label for="file-input">
        <img src="https://icons.iconarchive.com/icons/dtafalonso/android-lollipop/128/Downloads-icon.png"/>
      </label>
    
      <input id="file-input" type="file" />
    </div>

    基本上,标签的 for 属性使得单击标签与单击指定的输入相同

    此外,将显示属性设置为 none 可以使文件输入根本不呈现,从而将其隐藏得干净整洁。

    在 Chrome 中进行了测试,但根据网络,应该适用于所有主要浏览器。 :)

    编辑: 此处添加了 JSFiddle: https://jsfiddle.net/c5s42vdz/

    回复
    0
  • 取消回复