Question

我正在编写我的第一个GWT项目。我有一个带有标签，文件上传控制和上传按钮的表单，但它们在各种Web浏览器中看起来很糟糕且太不同了。来自文件上传控件的按钮也没有像GWT按钮控件那样的样式。而另一个问题是，在Chrome按钮中，文件选择位于左侧？！？

我能做些什么呢？

Internet Explorer 中的文件上传：

Firefox 中的文件上传：

Chrome 中的文件上传：

Answer 1

不幸的是，这是<input type='file' />在各种浏览器中呈现的方式。输入类型的FileUpload widget just wraps。

如果您希望拥有一致的文件上传界面，则可能会执行以下操作。

我真的不确定这是否有用，但这是解决这个问题的可行方法。

Answer 2

<input type="file">在不同的浏览器中看起来会有所不同。这就是他们和我们必须忍受的方式。

但我不认为这是值得担心的事情。如果有人选择使用浏览器，他们会根据浏览器的外观决定工作，其中包括<input type="file">.的呈现

也无法更改此控件的按钮样式（以合适/干净的方式）。

在我看来，你可以让他们保持原样。对我来说，<input type="file">是系统（浏览器）拥有的某种系统控件，而不是程序员。您还不能决定要显示哪些文件以及不显示哪些文件（例如，过滤并显示“.doc”和“.docx”，其他任何内容都不可能）

如果由于某种原因你真的真的需要一个统一的界面：一些网站使用一个按钮的图片并使用flash来显示文件打开框。这依赖于闪存的存在。我记得（2年的记忆）在YUI中有一个控件用于这种文件输入（基于闪存），也许在GWT中有一个类似的。我不太确定。

Answer 3

有一个article on quirksmode显示了一个解决方案，它使用CSS技巧覆盖输入字段，基本上是你喜欢的任何内容。

我不确定，如果我真的想推荐这种技术，因为它对我来说看起来像一个令人讨厌的（虽然好看的）技巧。我还想象，有些浏览器可能会使用针对该技术的防御机制，因为它看起来可能与Clickjacking有关。

Answer 4

另一种简单的方法。在html中创建一个“输入类型文件”标记并隐藏它。然后单击一个按钮并根据需要对其进行格式化。在此之后使用javascript / jquery以单击按钮时以编程方式单击输入标记。

HTML： -

<input id="file" type="file" style="display: none;">
<button id="button">Add file</button>

JAVASCRIPT： -

$('#button').click(function(){
    $('#file').click();
});

CSS： -

#button
{
    background-color: blue;
    color: white;
}

这是一个有效的JS小提琴： - http://jsfiddle.net/32na3/