文件上传控制和 GWT 外观答案

【问题标题】：File Upload Control and GWT Look and Feel文件上传控制和 GWT 外观
【发布时间】：2011-03-19 13:20:48
【问题描述】：

我正在编写我的第一个 GWT 项目。我有一个带有标签、文件上传控件和上传按钮的表单，但它们在各种网络浏览器中看起来很糟糕而且差别太大。此外，来自文件上传控件的按钮与 GWT 按钮控件的样式不同。另一个问题是，Chrome 文件选择按钮在左侧？！？

我能做些什么？

在 Internet Explorer 中上传文件：

Firefox 中的文件上传：

在 Chrome 中上传文件：

【问题讨论】：

【解决方案1】：

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

如果您想要一些一致的文件上传 UI，您可以执行以下操作。

我真的不确定这是否可行，但这是解决此问题的一种可能方法。

【讨论】：

仅供尝试的人使用。现代浏览器无法做到这一点。它提供类似“C:/fakepath/File_name.jpg”的输出。因为，大多数现代浏览器都将其视为安全风险。想想一个场景，您可能会做一些工作并上传一些文件，并且有一个后台脚本可以拾取您的文件并传输它。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

但我认为这不是真正值得担心的事情。如果有人选择使用浏览器，他们决定使用浏览器的外观和感觉，其中包括<input type="file">.的渲染

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

在我看来，您可以让它们保持原样。对我来说，<input type="file"> 是一种由 system（浏览器）拥有的系统控件，而不是程序员。您也无法决定显示哪些文件以及不显示哪些文件（例如，过滤和显示“.doc”和“.docx”，没有其他可能）

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

【讨论】：

【解决方案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/

【讨论】：