Html 浏览和上传文件按钮上的图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3143823/
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
Image on Browse and upload file button
提问by fawad
I want to have image button for "browse" and "upload"
我想要“浏览”和“上传”的图像按钮
I have textbox using the following code:
我有使用以下代码的文本框：
CSS
CSS
.uploadpathdiv
{
margin:0;
height:44px;
width:464px;
background:url('images/img-upload.png') no-repeat bottom;
}
.uploadpath
{
background:none;
border:none;
width:400px;
height:40px;
margin:0;
padding: 2px 7px 0px 7px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}
HTML
HTML
<div class="uploadpathdiv">
<input class="uploadpath" name="path" type="text" />
</div>
<img src="/themes/scaccarium/images/button-upload.png" />
<img src="/themes/scaccarium/images/button-browse.png" />
The image code is for both "browse" and "upload" button.
图像代码用于“浏览”和“上传”按钮。
Please help me to correct the above code so that when i press the browse button i get "file selection option" as you see when you use <input type = "file" name="browse">. Secondly, the path of the file must be shown in the textbox above.
请帮我更正上面的代码，这样当我按下浏览按钮时，我会得到“文件选择选项”，正如您在使用<input type = "file" name="browse">. 其次，文件的路径必须显示在上面的文本框中。
Thirdly when i press the upload button the file should be uploaded
第三，当我按下上传按钮时，文件应该被上传
回答by D-Inventor
If you label an image with the label tag, you can click on the image and it will select the browse button.
如果您使用标签标签标记图像，则可以单击图像，它会选择浏览按钮。
<div id="fileInput">
<label for="FileID"><img src="ImageURL"></label>
<input type="file" id="FileID"/>
</div>
回答by Unicron
It is not possible to target the "browse..." button of file upload controls via CSS.
无法通过 CSS 定位文件上传控件的“浏览...”按钮。
A HTML-based workaround can be found here: Styling an input type="file"not sure whether it can do exactly what you need, but I think that's the closest you can get.
可以在此处找到基于 HTML 的解决方法：样式化输入类型 =“文件”不确定它是否可以完全满足您的需要，但我认为这是您可以获得的最接近的方法。
If you want full control over the control (no pun intended) you would have to use a Flash-based uploader like SWFUpload. Note that those uploaders work a bit differently from a normal file upload control, so you may need to change your workflow to get it to work, and decide whether it's worth the effort.
如果您想完全控制控件（无双关语），则必须使用基于 Flash 的上传器，如SWFUpload。请注意，这些上传器的工作方式与普通文件上传控件略有不同，因此您可能需要更改工作流程以使其工作，并决定是否值得付出努力。
回答by Marz
Most of the CSS properties we usually use to style form controls don't have any effect on the upload control, there are ways to style it, a good example is Here
大多数我们通常用来设置表单控件样式的 CSS 属性对上传控件没有任何影响，有一些方法可以对其进行样式设置，一个很好的例子是Here
This technique basically sets the opacity of the control to 0 and placed another "styled" button underneath it. thus when clicking on the style button you are actually clicking the upload control.
这种技术基本上将控件的不透明度设置为 0，并在其下方放置另一个“样式”按钮。因此，当单击样式按钮时，您实际上是在单击上传控件。
I have spent many hours battling with custom file upload controls for clients and have found by far the best approach is making use of Valums jquery file uploadereverything is already built and you can customize as much as you want, also has drag and drop functionality.
我花了很多时间为客户处理自定义文件上传控件，并且发现迄今为止最好的方法是使用Valums jquery 文件上传器，一切都已经构建好了，您可以根据需要进行自定义，还具有拖放功能。
