I am wondering how to hide the text field portion of a standard html file upload tag
我想知道如何隐藏标准html文件上传标记的文本字段部分
for example
例如
<input type="file" name="somename" size="chars">
This generates obviously a text field and next to that field is a browse button... I want to hide the text field part but keep the button.
这显然会生成一个文本字段，该字段旁边是一个browse按钮……我想隐藏文本字段部分，但保留按钮。
10 个解决方案
#1
26
I'd recommend hiding the whole thing and putting a separate button object which, when clicked, will end up clicking the input's browse button.
我建议将整个事情隐藏起来，并放置一个单独的按钮对象，当单击时，它将会单击输入的browse按钮。
You can do this with CSS and javascript -- check out this article (actually the second time I've used this reference today).
您可以使用CSS和javascript来实现这一点——请参阅本文(实际上，这是我今天第二次使用此引用)。
#2
31
This will surely work i have used it in my projects.I hope this helps :)
我已经在我的项目中使用过了。我希望这能有所帮助。
<input type="file" id="selectedFile" style="display: none;" />
<input type="button" value="Browse..." onclick="document.getElementById('selectedFile').click();" />
#3
9
The easiest way as not mentioned in any answer would be to use a label for the input.
任何答案中都没有提到的最简单的方法是为输入使用标签。
<input type="file" name="myFile" id="myFile">
<label for="myFile">Choose your file</label>
input[type="file"] { display: none; }
Using label will be useful because clicking on the label is clicking on the input. This will only work when input's id is equal to label's for attribute.
使用标签会很有用，因为点击标签就是点击输入。这只在输入的id等于label的for属性时有效。
#4
1
You can put an image as a background for the button. That worked for me, a while ago.
您可以将图像作为按钮的背景。这对我来说很有效。
#5
1
The file input button is extremely difficult to style and manipulate, mainly for security reasons.
文件输入按钮的样式和操作非常困难，主要是出于安全原因。
If you really need to customize your upload button, I recommend a Flash based uploader like SWFUpload or Uploadify that enables you to use a custom image as button, display a progress bar, and other things.
如果您确实需要自定义上传按钮，我推荐使用基于Flash的上传程序，比如SWFUpload或Uploadify，它可以让您使用自定义图像作为按钮、显示进度条和其他功能。
However, its basic philosophy differs from just embedding a control into a form. The uploading process takes place separately. Make sure you check out first whether this works for you.
然而，它的基本原理不同于仅仅将一个控件嵌入到一个窗体中。上传过程是分开进行的。确保你首先检查这个是否适合你。
#6
0
演示
Pure css and html
纯css和html
The trick is to use a button above the input file button.
诀窍是在输入文件按钮上方使用一个按钮。
Plus, you should set
另外,你应该设定
filter: alpha(opacity=0);
to the input file.
输入文件。
#7
0
You could possibly hide the whole element and show a button or link instead. This is rather easy.
您可以隐藏整个元素并显示一个按钮或链接。这相当简单。
<input type="file" name="file" id="fileupload" style="width:200px; display:none;" onchange="submitmyform();" />
<input type="button" value="Select an Image" onclick="$('#fileupload').click();" />
The file upload element is hidden. The button will fire the click event and shows the file browser window. On selecting a file, the change event is fired and this can submit a form or call a script function, whatsoever.
文件上传元素被隐藏。该按钮将触发单击事件并显示文件浏览器窗口。在选择文件时，会触发更改事件，这可以提交表单或调用脚本函数。
Hope this helps...
希望这有助于……
#8
0
input[type="file"] { outline: none; cursor: pointer; position: absolute; top:0; clip: rect(0 265px 22px 155px); } /* Hide input field */
@-moz-document url-prefix()
{
input[type="file"] { clip: rect(0, 265px, 22px, 125px); } /* Mozilla */
}
* > /**/ input[type="file"], x:-webkit-any-link { clip: rect(0, 86px, 22px, 0); } /* Webkit */
This will do the same without JavaScript, but requires absolute positioning to use the clip property.
不使用JavaScript也可以这样做，但是使用clip属性需要绝对的定位。
References
参考文献
- Custom Upload Button
- 自定义上传按钮
- CSS Wikibook: Clipping
- CSS维基教科书:剪裁
#9
0
If you are using jQuery, have a look at this plugin - https://github.com/ajaxray/bootstrap-file-field
如果您正在使用jQuery，请查看这个插件—https://github.com/ajaxray/bootstrap-file-field
It will display the file input field as a bootstrap button and will show selected file names beautifully. Additionally, you can set various restrictions using simple data-attributes or settings in js.
e,g, data-file-types="image/jpeg,image/png" will restrict selecting file types except jpg and png images.
它将作为引导按钮显示文件输入字段，并将漂亮地显示选定的文件名。此外，还可以使用简单的数据属性或js设置设置各种限制。e,g, data-file-types=“image/jpeg,image/png”将限制文件类型的选择，jpg和png图像除外。
#10
0
Try adding this css to your input
尝试将此css添加到您的输入中
font-size: 0;
#1
26
I'd recommend hiding the whole thing and putting a separate button object which, when clicked, will end up clicking the input's browse button.
我建议将整个事情隐藏起来，并放置一个单独的按钮对象，当单击时，它将会单击输入的browse按钮。
You can do this with CSS and javascript -- check out this article (actually the second time I've used this reference today).
您可以使用CSS和javascript来实现这一点——请参阅本文(实际上，这是我今天第二次使用此引用)。
#2
31
This will surely work i have used it in my projects.I hope this helps :)
我已经在我的项目中使用过了。我希望这能有所帮助。
<input type="file" id="selectedFile" style="display: none;" />
<input type="button" value="Browse..." onclick="document.getElementById('selectedFile').click();" />
#3
9
The easiest way as not mentioned in any answer would be to use a label for the input.
任何答案中都没有提到的最简单的方法是为输入使用标签。
<input type="file" name="myFile" id="myFile">
<label for="myFile">Choose your file</label>
input[type="file"] { display: none; }
Using label will be useful because clicking on the label is clicking on the input. This will only work when input's id is equal to label's for attribute.
使用标签会很有用，因为点击标签就是点击输入。这只在输入的id等于label的for属性时有效。
#4
1
You can put an image as a background for the button. That worked for me, a while ago.
您可以将图像作为按钮的背景。这对我来说很有效。
#5
1
The file input button is extremely difficult to style and manipulate, mainly for security reasons.
文件输入按钮的样式和操作非常困难，主要是出于安全原因。
If you really need to customize your upload button, I recommend a Flash based uploader like SWFUpload or Uploadify that enables you to use a custom image as button, display a progress bar, and other things.
如果您确实需要自定义上传按钮，我推荐使用基于Flash的上传程序，比如SWFUpload或Uploadify，它可以让您使用自定义图像作为按钮、显示进度条和其他功能。
However, its basic philosophy differs from just embedding a control into a form. The uploading process takes place separately. Make sure you check out first whether this works for you.
然而，它的基本原理不同于仅仅将一个控件嵌入到一个窗体中。上传过程是分开进行的。确保你首先检查这个是否适合你。
#6
0
演示
Pure css and html
纯css和html
The trick is to use a button above the input file button.
诀窍是在输入文件按钮上方使用一个按钮。
Plus, you should set
另外,你应该设定
filter: alpha(opacity=0);
to the input file.
输入文件。
#7
0
You could possibly hide the whole element and show a button or link instead. This is rather easy.
您可以隐藏整个元素并显示一个按钮或链接。这相当简单。
<input type="file" name="file" id="fileupload" style="width:200px; display:none;" onchange="submitmyform();" />
<input type="button" value="Select an Image" onclick="$('#fileupload').click();" />
The file upload element is hidden. The button will fire the click event and shows the file browser window. On selecting a file, the change event is fired and this can submit a form or call a script function, whatsoever.
文件上传元素被隐藏。该按钮将触发单击事件并显示文件浏览器窗口。在选择文件时，会触发更改事件，这可以提交表单或调用脚本函数。
Hope this helps...
希望这有助于……
#8
0
input[type="file"] { outline: none; cursor: pointer; position: absolute; top:0; clip: rect(0 265px 22px 155px); } /* Hide input field */
@-moz-document url-prefix()
{
input[type="file"] { clip: rect(0, 265px, 22px, 125px); } /* Mozilla */
}
* > /**/ input[type="file"], x:-webkit-any-link { clip: rect(0, 86px, 22px, 0); } /* Webkit */
This will do the same without JavaScript, but requires absolute positioning to use the clip property.
不使用JavaScript也可以这样做，但是使用clip属性需要绝对的定位。
References
参考文献
- Custom Upload Button
- 自定义上传按钮
- CSS Wikibook: Clipping
- CSS维基教科书:剪裁
#9
0
If you are using jQuery, have a look at this plugin - https://github.com/ajaxray/bootstrap-file-field
如果您正在使用jQuery，请查看这个插件—https://github.com/ajaxray/bootstrap-file-field
It will display the file input field as a bootstrap button and will show selected file names beautifully. Additionally, you can set various restrictions using simple data-attributes or settings in js.
e,g, data-file-types="image/jpeg,image/png" will restrict selecting file types except jpg and png images.
它将作为引导按钮显示文件输入字段，并将漂亮地显示选定的文件名。此外，还可以使用简单的数据属性或js设置设置各种限制。e,g, data-file-types=“image/jpeg,image/png”将限制文件类型的选择，jpg和png图像除外。
#10
0
Try adding this css to your input
尝试将此css添加到您的输入中
font-size: 0;