Html 隐藏输入 type=file 上的浏览按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6376452/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hide the browse button on a input type=file
提问by josh
Is there a way to hide the browse button and only leave the text box that works in all browsers?
有没有办法隐藏浏览按钮，只留下在所有浏览器中都有效的文本框？
I have tried setting the margins but they show up different in each browser
我试过设置边距，但它们在每个浏览器中显示不同
回答by Ortiga
No, what you can do is a (ugly) workaround, but largely used
不，你可以做的是一个（丑陋的）解决方法，但被广泛使用
- Create a normal input and a image
- Create file input with opacity 0
- When the user click on the image, you simulate a click on the file input
- When file input change, you pass it's value to the normal input (so user can see the path)
- 创建一个普通的输入和一个图像
- 创建不透明度为 0 的文件输入
- 当用户单击图像时，您模拟了对文件输入的单击
- 当文件输入更改时，您将其值传递给普通输入（以便用户可以看到路径）
Here you can see a full explanation, along with code:
在这里您可以看到完整的解释以及代码：
回答by Suphi ?EV?KER
You may just without making the element hidden, simply make it transparent by making its opacity to 0.
您可以不隐藏元素，只需通过将其不透明度设置为 0 来使其透明。
Making the input file hidden will make it STOP working. So DON'T DO THAT..
隐藏输入文件将使其停止工作。所以不要这样做..
Hereyou can find an example for a transparent Browse operation;
在这里您可以找到透明浏览操作的示例；
回答by vasudev
Below code is very useful to hide default browse button and use custom instead:
下面的代码对于隐藏默认浏览按钮并使用自定义非常有用：
(function($) {
$('input[type="file"]').bind('change', function() {
$("#img_text").html($('input[type="file"]').val());
});
})(jQuery).file-input-wrapper {
height: 30px;
margin: 2px;
overflow: hidden;
position: relative;
width: 118px;
background-color: #fff;
cursor: pointer;
}
.file-input-wrapper>input[type="file"] {
font-size: 40px;
position: absolute;
top: 0;
right: 0;
opacity: 0;
cursor: pointer;
}
.file-input-wrapper>.btn-file-input {
background-color: #494949;
border-radius: 4px;
color: #fff;
display: inline-block;
height: 34px;
margin: 0 0 0 -1px;
padding-left: 0;
width: 121px;
cursor: pointer;
}
.file-input-wrapper:hover>.btn-file-input {
//background-color: #494949;
}
#img_text {
float: right;
margin-right: -80px;
margin-top: -14px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="file-input-wrapper">
<button class="btn-file-input">SELECT FILES</button>
<input type="file" name="image" id="image" value="" />
</div>
<span id="img_text"></span>
</body>回答by PixelsTech
.dropZoneOverlay, .FileUpload {
width: 283px;
height: 71px;
}
.dropZoneOverlay {
border: dotted 1px;
font-family: cursive;
color: #7066fb;
position: absolute;
top: 0px;
text-align: center;
}
.FileUpload {
opacity: 0;
position: relative;
z-index: 1;
} <div class="dropZoneContainer">
<input type="file" id="drop_zone" class="FileUpload" accept=".jpg,.png,.gif" onchange="handleFileSelect(this) " />
<div class="dropZoneOverlay">Drag and drop your image <br />or<br />Click to add</div>
</div>I find a good way of achieving this at Remove browse button from input=file.
我在Remove browse button from input=file找到了实现此目的的好方法。
The rationale behind this solution is that it creates a transparent input=file control and creates an layer visible to the user below the file control. The z-index of the input=file will be higher than the layer.
此解决方案背后的基本原理是它创建了一个透明的 input=file 控件，并在文件控件下方创建了一个对用户可见的层。input=file 的 z-index 将高于层。
With this, it appears that the layer is the file control itself. But actually when you clicks on it, the input=file is the one clicked and the dialog for choosing file will appear.
有了这个，图层似乎就是文件控件本身。但实际上当你点击它时，输入=文件是被点击的，然后会出现选择文件的对话框。
回答by gwildu
Just an additional hint for avoiding too much JavaScript here: if you add a label and style it like the "browse button" you want to have, you could place it over the real browse button provided by the browser or hide the button somehow differently. By clicking the label the browser behavior is to open the dialog to browse for the file (don't forget to add the "for" attribute on the label with value of the id of the file input field to make this happen). That way you can customize the button in almost any way you want.
这里只是一个避免使用太多 JavaScript 的额外提示：如果您添加一个标签并将其样式设置为您想要的“浏览按钮”，您可以将其放置在浏览器提供的真实浏览按钮上，或者以某种方式隐藏该按钮。通过单击标签，浏览器的行为是打开对话框以浏览文件（不要忘记在标签上添加“for”属性，并使用文件输入字段的 id 值来实现这一点）。这样您几乎可以以任何您想要的方式自定义按钮。
In some cases, it might be necessary to add a second input field or text element to display the value of the file input and hide the input completely as described in other answers. Still the label would avoid to simulate the click on the text input button by JavaScript.
在某些情况下，可能需要添加第二个输入字段或文本元素来显示文件输入的值并完全隐藏输入，如其他答案中所述。标签仍然会避免模拟 JavaScript 对文本输入按钮的点击。
BTW a similar hack can be used for customizing checkboxes or radiobuttons. by adding a label for them, clicking the label causes to select the checkbox/radiobutton. The native checkbox/radiobutton then can be hidden somewere and be replaced by a custom element.
顺便说一句，类似的 hack 可用于自定义复选框或单选按钮。通过为它们添加标签，单击标签会导致选择复选框/单选按钮。然后可以隐藏本机复选框/单选按钮并由自定义元素替换。
回答by Eaweb
So I found this solution that is very easy to implement and gives a very clean GUI
所以我发现这个解决方案很容易实现并且提供了一个非常干净的 GUI
put this in your HTML
把它放在你的 HTML 中
<label class="att-each"><input type="file"></label>
and this in your CSS
这在你的 CSS 中
label.att-each {
width: 68px;
height: 68px;
background: url("add-file.png") no-repeat;
text-indent: -9999px;
}
add-file.png can be any graphic you wish to show on the webpage. Clicking the graphic will launch the default file explorer.
add-file.png 可以是您希望在网页上显示的任何图形。单击图形将启动默认文件浏览器。
Working Example: http://www.projectnaija.com/file-picker17.html
回答by Don
Came across this question and didn't feel like any of the answers were clean. Here is my solution:
遇到这个问题，并没有觉得任何答案都是干净的。这是我的解决方案：
<label>
<span>Select file</span>
<input type="file" style="display: none">
</label>
When you click the label the select file dialog will open. No js needed to make it happen.
当您单击标签时，将打开选择文件对话框。不需要js来实现它。
You can style the label to look like a button.
您可以将标签的样式设置为看起来像一个按钮。
Here is an example using w3css and font awesome:
这是一个使用 w3css 和字体真棒的例子：
<label class="w3-button w3-blue w3-round">
<span><i class="fas fa-image"></i></span>
<input type="file" style="display: none" >
</label>
Of course you need to add an event listener to the input to detect a file was chosen.
当然，您需要向输入添加一个事件侦听器以检测已选择的文件。
回答by Tamizaan
Oddly enough, this works for me (when I place inside a button tag).
奇怪的是，这对我有用（当我放在按钮标签内时）。
.button {
position: relative;
input[type=file] {
color: transparent;
background-color: transparent;
position: absolute;
left: 0;
width: 100%;
height: 100%;
top: 0;
opacity: 0;
z-index: 100;
}
}
Only tested in Chrome (macOS Sierra).
仅在 Chrome (macOS Sierra) 中测试。
