使用按钮将input type "file"隐藏

Question

我在想这是否可行？谷歌上没有相关信息。

基本上，我想让我的按钮在被选择时模拟，以允许用户上传文件。我已经阅读过使用标签是可能的，但我需要使用按钮来实现 UX/UI。

<button style="position:fixed;bottom:10px;right:70px" type="button" class="btn btn-default">
    <input type="file" id="files" visbility="hidden" />
    <span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span>
</button>

当前我的按钮看起来像这样：，变成了这样：。

- Apprentice Programmer

---

你可以使用 hidden 属性代替 visbility="hidden"，例如：<input type="file" id="files" hidden />（https://www.w3schools.com/tags/att_global_hidden.asp） - cespon

Answer 1

您可以使用label来实现，只需要隐藏input即可。

<!-- head -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<!-- body -->
<label for="upload">
      <span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span>
      <input type="file" id="upload" style="display:none">
</label>

- qtgye

---

请注意，它无法在旧的 Android 4.2 浏览器上运行。 - Brian Cannard

标签Tag中的"for"和输入Tag中的"id"必须匹配。其余部分仅用于样式。 - meles

请注意，Android 4.2及以下版本的用户仅占0.1%。 - Dorian

Answer 2

尝试使用不透明度为0的选项

opacity:0;

https://jsfiddle.net/m4e0y2o3/12/

如果你想支持旧版浏览器，可以加上回退（fallback）处理。

.hiddenFileInput > input{
  height: 100%;
  width: 100;
  opacity: 0;
  cursor: pointer;
}
.hiddenFileInput{
  border: 1px solid #ccc;
  width: 100px;
  height: 100px;
  display: inline-block;
  overflow: hidden;
  cursor: pointer;
  
  /*for the background, optional*/
  background: center center no-repeat;
  background-size: 75% 75%;
  background-image:  url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9IjUxMnB4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9Ii01MyAxIDUxMSA1MTEuOTk5MDYiIHdpZHRoPSI1MTJweCI+CjxnIGlkPSJzdXJmYWNlMSI+CjxwYXRoIGQ9Ik0gMjc2LjQxMDE1NiAzLjk1NzAzMSBDIDI3NC4wNjI1IDEuNDg0Mzc1IDI3MC44NDM3NSAwIDI2Ny41MDc4MTIgMCBMIDY3Ljc3NzM0NCAwIEMgMzAuOTIxODc1IDAgMC41IDMwLjMwMDc4MSAwLjUgNjcuMTUyMzQ0IEwgMC41IDQ0NC44NDM3NSBDIDAuNSA0ODEuNjk5MjE5IDMwLjkyMTg3NSA1MTIgNjcuNzc3MzQ0IDUxMiBMIDMzOC44NjMyODEgNTEyIEMgMzc1LjcxODc1IDUxMiA0MDYuMTQwNjI1IDQ4MS42OTkyMTkgNDA2LjE0MDYyNSA0NDQuODQzNzUgTCA0MDYuMTQwNjI1IDE0NC45NDE0MDYgQyA0MDYuMTQwNjI1IDE0MS43MjY1NjIgNDA0LjY1NjI1IDEzOC42MzY3MTkgNDAyLjU1NDY4OCAxMzYuMjg1MTU2IFogTSAyNzkuOTk2MDk0IDQzLjY1NjI1IEwgMzY0LjQ2NDg0NCAxMzIuMzI4MTI1IEwgMzA5LjU1NDY4OCAxMzIuMzI4MTI1IEMgMjkzLjIzMDQ2OSAxMzIuMzI4MTI1IDI3OS45OTYwOTQgMTE5LjIxODc1IDI3OS45OTYwOTQgMTAyLjg5NDUzMSBaIE0gMzM4Ljg2MzI4MSA0ODcuMjY1NjI1IEwgNjcuNzc3MzQ0IDQ4Ny4yNjU2MjUgQyA0NC42NTIzNDQgNDg3LjI2NTYyNSAyNS4yMzQzNzUgNDY4LjA5NzY1NiAyNS4yMzQzNzUgNDQ0Ljg0Mzc1IEwgMjUuMjM0Mzc1IDY3LjE1MjM0NCBDIDI1LjIzNDM3NSA0NC4wMjczNDQgNDQuNTI3MzQ0IDI0LjczNDM3NSA2Ny43NzczNDQgMjQuNzM0Mzc1IEwgMjU1LjI2MTcxOSAyNC43MzQzNzUgTCAyNTUuMjYxNzE5IDEwMi44OTQ1MzEgQyAyNTUuMjYxNzE5IDEzMi45NDUzMTIgMjc5LjUwMzkwNiAxNTcuMDYyNSAzMDkuNTU0Njg4IDE1Ny4wNjI1IEwgMzgxLjQwNjI1IDE1Ny4wNjI1IEwgMzgxLjQwNjI1IDQ0NC44NDM3NSBDIDM4MS40MDYyNSA0NjguMDk3NjU2IDM2Mi4xMTMyODEgNDg3LjI2NTYyNSAzMzguODYzMjgxIDQ4Ny4yNjU2MjUgWiBNIDMzOC44NjMyODEgNDg3LjI2NTYyNSAiIHN0eWxlPSIgZmlsbC1ydWxlOm5vbnplcm87ZmlsbC1vcGFjaXR5OjE7IiBzdHJva2U9IiMwMDAwMDAiIGZpbGw9IiMwMDAwMDAiLz4KPHBhdGggZD0iTSAzMDUuMTAxNTYyIDQwMS45MzM1OTQgTCAxMDEuNTM5MDYyIDQwMS45MzM1OTQgQyA5NC43MzgyODEgNDAxLjkzMzU5NCA4OS4xNzE4NzUgNDA3LjQ5NjA5NCA4OS4xNzE4NzUgNDE0LjMwMDc4MSBDIDg5LjE3MTg3NSA0MjEuMTAxNTYyIDk0LjczODI4MSA0MjYuNjY3OTY5IDEwMS41MzkwNjIgNDI2LjY2Nzk2OSBMIDMwNS4yMjY1NjIgNDI2LjY2Nzk2OSBDIDMxMi4wMjczNDQgNDI2LjY2Nzk2OSAzMTcuNTkzNzUgNDIxLjEwMTU2MiAzMTcuNTkzNzUgNDE0LjMwMDc4MSBDIDMxNy41OTM3NSA0MDcuNDk2MDk0IDMxMi4wMjczNDQgNDAxLjkzMzU5NCAzMDUuMTAxNTYyIDQwMS45MzM1OTQgWiBNIDMwNS4xMDE1NjIgNDAxLjkzMzU5NCAiIHN0eWxlPSIgZmlsbC1ydWxlOm5vbnplcm87ZmlsbC1vcGFjaXR5OjE7IiBzdHJva2U9IiMwMDAwMDAiIGZpbGw9IiMwMDAwMDAiLz4KPHBhdGggZD0iTSAxNDAgMjY4Ljg2MzI4MSBMIDE5MC45NTMxMjUgMjE0LjA3NDIxOSBMIDE5MC45NTMxMjUgMzQ5LjEyNSBDIDE5MC45NTMxMjUgMzU1LjkyNTc4MSAxOTYuNTE5NTMxIDM2MS40OTIxODggMjAzLjMyMDMxMiAzNjEuNDkyMTg4IEMgMjEwLjEyNSAzNjEuNDkyMTg4IDIxNS42ODc1IDM1NS45MjU3ODEgMjE1LjY4NzUgMzQ5LjEyNSBMIDIxNS42ODc1IDIxNC4wNzQyMTkgTCAyNjYuNjQwNjI1IDI2OC44NjMyODEgQyAyNjkuMTEzMjgxIDI3MS40NTcwMzEgMjcyLjMzMjAzMSAyNzIuODIwMzEyIDI3NS42Njc5NjkgMjcyLjgyMDMxMiBDIDI3OC42MzY3MTkgMjcyLjgyMDMxMiAyODEuNzMwNDY5IDI3MS43MDcwMzEgMjg0LjA3ODEyNSAyNjkuNDgwNDY5IEMgMjg5LjAyNzM0NCAyNjQuNzgxMjUgMjg5LjM5ODQzOCAyNTYuOTg4MjgxIDI4NC42OTkyMTkgMjUyLjA0Mjk2OSBMIDIxMi4yMjY1NjIgMTc0LjI1MzkwNiBDIDIwOS44NzUgMTcxLjc4MTI1IDIwNi42NjAxNTYgMTcwLjI5Njg3NSAyMDMuMTk5MjE5IDE3MC4yOTY4NzUgQyAxOTkuNzM0Mzc1IDE3MC4yOTY4NzUgMTk2LjUxOTUzMSAxNzEuNzgxMjUgMTk0LjE3MTg3NSAxNzQuMjUzOTA2IEwgMTIxLjY5OTIxOSAyNTIuMDQyOTY5IEMgMTE3IDI1Ni45ODgyODEgMTE3LjM3MTA5NCAyNjQuOTAyMzQ0IDEyMi4zMTY0MDYgMjY5LjQ4MDQ2OSBDIDEyNy41MTE3MTkgMjc0LjE3OTY4OCAxMzUuMzAwNzgxIDI3My44MDg1OTQgMTQwIDI2OC44NjMyODEgWiBNIDE0MCAyNjguODYzMjgxICIgc3R5bGU9IiBmaWxsLXJ1bGU6bm9uemVybztmaWxsLW9wYWNpdHk6MTsiIHN0cm9rZT0iIzAwMDAwMCIgZmlsbD0iIzAwMDAwMCIvPgo8L2c+Cjwvc3ZnPgo=)
}

<span class="hiddenFileInput">
  <input type="file" name="theFile"/>
</span>

- Victor Radu

---

获取那个小提琴的404错误。 - chovy

悬停时光标未变为顶部的指针（我猜需要添加一些偏移）。 - Pavlo Oliinyk

@victor-radu，请问您能否解释一下为什么您选择使用opacity: 0而不是display: none呢？ 稍微解释一下（说明何时使用opacity: 0会更好）将有助于以后的参考。谢谢！ - Boris D. Teoharov

你好，@BorisD.Teoharov。display none 实际上并不会在 DOM 中呈现元素，这使得与它的交互几乎不可能。Opacity 0 会呈现元素，但会使其完全透明，这意味着即使你看不到它，它仍然会捕捉到点击交互。 - Victor Radu

Answer 3

如果您正在使用Angular，我认为这是一个相当不错的解决方案。

  <button class="" (click)="uploader.click()">
     <input hidden type="file" #uploader />
  <button>

你可以轻松地将其类比于其他技术。

- Smaillns

---

这是在使用Angular时的完美解决方案。 - Rodrigo Silva

当按钮位于程序上方的按钮行中，而显示输入图像的位置位于分离的组中时，Angular的情况如何处理？即：显示部分位于sketch.component.html / sketch.component.ts / sketch.component.spec.ts / topnav.component.scss，而按钮组件位于topnav.component.html / topnav.component.ts / topnav.component.spec.ts / topnav.component.scss中。您能否给我展示如何实现这样的功能的示例？ - Wisarut Bholsithi

Answer 4

作为其他答案提到的隐藏元素的各种方法，考虑使用opacity:0，正如MDN文档中引用的那样：

“注意：使用opacity来隐藏文件输入而不是visibility:hidden或display:none，因为辅助技术将后两个样式解释为文件输入不可交互。”

你可以通过任何其他事件（例如：按钮点击、悬停等）触发文件输入，你可以调用元素上的click()方法（使用getElementById()、querySelector()等获取它）。

const inputElement = document.getElementById('file-input-element')

// on some other event
inputElement.click() // will let user select files

- krishnakeshan

Answer 5

像这样就可以：

<button id="fileup" style="position:fixed;bottom:10px;right:70px" type="button" class="btn btn-default" >
<input type="file" id="files" visbility="hidden"/>
<span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span>
</button>
<script>
$('#fileup').click(function() {
   $('#files').click();
});
</script>

- Eduardo Ramos

---

我认为你最好将 visibility="hidden" 改为 style="display: none"。 - Eduardo Ramos

想了解更多关于 visibility hidden vs display none 的区别，请点击链接。 - Yogi

Answer 6

对我来说，这个代码可以运行：

<label htmlFor="inputGroupFile01">
     <span className="fa fa-file-image fa-lg"/>
</label>

- Kseniia Bashkova

Answer 7

我们可以在输入框中使用 style="opacity: 0"。

<input type="file" id="files"  style="opacity: 0"/>

不透明度与可见性：
使用opacity来隐藏文件输入框，而不是使用visibility: hidden或display: none，因为辅助技术会将后两种样式解释为文件输入框不可交互。 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/file

您的按钮（仅带有文件夹图标）：

<button style="position:fixed;bottom:10px;right:70px" type="button" class="btn btn-default">
    <input type="file" id="files"  style="opacity: 0"/>
    <span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span>
    button
</button>

祝你好运！

- Judah the Hudson

Answer 8

一个不错的方法是将输入框设置为：

• 在父元素内部绝对定位
• 透明度为零
• 填充整个父元素

在这个例子中，父元素是一个按钮。

<button 
  style="padding: 0.625rem; border-radius: 9999px; background-color: #1F87CC; position: relative;"
>
  <input
    type="file"
    style="position: absolute; bottom: 0px; top: -1px; left: 0px; right: 0px; opacity: 0;"
  >
  <svg viewBox="0 0 20 20" fill="#FFFFFF" aria-hidden="true" style="width: 1rem; height: 1rem;"><path fill-rule="evenodd" d="M15.621 4.379a3 3 0 00-4.242 0l-7 7a3 3 0 004.241 4.243h.001l.497-.5a.75.75 0 011.064 1.057l-.498.501-.002.002a4.5 4.5 0 01-6.364-6.364l7-7a4.5 4.5 0 016.368 6.36l-3.455 3.553A2.625 2.625 0 119.52 9.52l3.45-3.451a.75.75 0 111.061 1.06l-3.45 3.451a1.125 1.125 0 001.587 1.595l3.454-3.553a3 3 0 000-4.242z" clip-rule="evenodd"></path></svg>
</button>

这将导致看起来像这样。圆形按钮作为"type=file"的输入字段起作用。

- rank

Answer 9

您可以使用以下代码将文件上传控件隐藏在按钮中：

```html Choose File ```

这样，用户单击按钮时，就会触发文件上传控件。

<div>
     <input type="file" id="files" style="display:none"/>
     <button onclick="click_the_button(files);">Click me</button>
</div>enter code here

<script>
    function click_the_button(btn){
        btn.click();
    }
</script>

- KNV

Answer 10

使用美观的输入文件[type="file"]的简单方法。

输出图像URL - https://istack.dev59.com/4Jl0H.webp

input[type="file"] {
 display: inline-block;
 opacity: 0;
 position: absolute;
 margin-left: 20px;
 margin-right: 20px;
 padding-top: 30px;
 padding-bottom: 67px;
 width: 85%;
 z-index: 99;
 margin-top: 10px;
 cursor:pointer;
}
.custom-file-upload {
 position:relative;
    display: inline-block;
    cursor: pointer;
 padding-top:40px;
 padding-bottom:40px;
 background:url(http://www.a-yachtcharter.com/search-fleet/webaccess/assets/img/uploadIcon.png) #fff center center no-repeat;
 width:91%;
 border:1px dashed #ff5b57 !important;
 margin-left:20px;
 margin-right:20px;
 margin-top:10px;
 text-align:center;
}

<input type="file" multiple class="form-control">
<label for="file-upload" class="custom-file-upload"></label>

- Prafulla