文件上传控制和GWT外观

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

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

也不可能(以体面/干净的方式)更改此控件的按钮样式。

在我看来,你可以让他们保持原样。对我来说 <input type=“文件”> 是由 系统 (浏览器),而不是程序员。您也不能决定要显示哪些文件以及不显示哪些文件(例如,筛选和显示“.doc”和“.docx”以及其他任何不可能的文件)

如果出于某种原因你真的 真正地 需要一个统一的界面:一些网站使用按钮的图片,并使用flash显示文件打开框。但这取决于闪光灯的存在。我记得(2年前的内存)在yui中有一个控件用于这种文件输入(基于flash),也许在gwt中有一个类似的控件。不过,我不太确定。

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

如果您希望有一些一致的文件上传用户界面,您可能会做如下的事情。

• 为文件上传创建一些样式化按钮。
• 不知何故(不确定如何),捕获click事件并隐藏 文件复制 小部件以某种方式打开浏览对话框。
• 通过调用 getFilename() 从隐藏 文件复制 小装置。

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

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

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

另一个简单的方法。在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/