html文件上传表单答案

【问题标题】：html file upload formhtml文件上传表单
【发布时间】：2010-12-05 20:31:32
【问题描述】：

我有一个具有简单文件上传要求（最大 1 mb）的 Web 应用程序。 Web 应用程序是一个对外公开的网站，必须（尽可能）与所有浏览器和版本兼容。

我们正在使用 C# .net 3.5 ASP .Net (IIS 7) 技术。

我们在实现文件上传控制时遇到了问题：

<input type="file" ... />

按钮点击不正确和输入法不同（例如在某些浏览器中点击文本框会打开输入字段）。

我们需要避免使用第三方文件上传工具。

使它与所有浏览器兼容的最佳方法是什么？我们可以使用框架（例如我们可以使用 JQuery）来做到这一点吗？

非常感谢任何帮助。

编辑：

这里有一些更具体的行为细节：

预期/预期：

一致地使用文本框字段（用于文件名）：

显示所选文件的文件名
没有事件触发浏览对话框的启动

浏览按钮的一致使用：

与标准 HTML 按钮的外观和感觉相同的 CSS 标准
打开浏览对话框
对话框取消 - 清除文本框字段
对话框正常 - （重新）填充文本框字段

我们希望文本框和按钮的外观和感觉与我们网站的其他部分使用相同的 CSS。

当前：

文本框点击事件打开对话框
文本框和按钮字段的通用显示
浏览按钮不适用于某些浏览器（未触发浏览对话框事件，但正在显示）

所有浏览器类型之间的行为（如上的事件/动作）应尽可能保持一致。

【问题讨论】：

您能详细说明您遇到的问题吗？实际发生了什么，您希望发生什么？
嗨，Marius，我提供了一些关于我的期望和实际遇到的更多细节。总之，我想要一致的行为（事件/动作）并能够将 css 应用于控件以适应我们网站的风格。

标签： html file upload cross-browser

【解决方案1】：

如果您按照此处的说明进行操作：http://www.15seconds.com/issue/010504.htm 你应该能够有一致的行为。刚刚

至于造型 - 这是你的任务。确保您的 HTML 和 CSS 在您支持的所有浏览器中都兼容（按预期工作）。

【讨论】：

嗨 Dmitry，由于安全原因等原因，应用于文件上传 HTML 的 CSS 的行为方式与其他控件不同。因此，使用我们当前的样式表应用它无法按预期工作。
Russell - 我不确定我是否在关注你。为什么这个特定控件的 CSS 与任何其他控件的行为不同？什么是安全原因？？？这只是它在客户端浏览器中呈现的方式......而且您可以控制它的外观。我错过了什么吗？

【解决方案2】：

让它与所有浏览器兼容的最佳方法是什么？

它已经兼容所有浏览器。只是不要太努力地编写脚本或彻底修改样式。您对文件上传字段的自定义可能性很小，部分原因是明显的安全原因，部分原因是许多浏览器中文本+按钮排列的多部分呈现根本不适合在单个框上操作的样式原语。

（例如在某些浏览器中单击文本框会打开输入字段）。

幸运的是，浏览器这样做的人已经习惯了这样做的文件上传字段；事实上，他们会期望浏览器这样做，如果你设法阻止它，他们会感到困惑。

（这是一个明智的措施：允许在文件名字段中输入很少有用，但它在过去造成了安全漏洞。）

浏览按钮的一致使用：

文件上传字段甚至不需要浏览按钮或文件查找器对话框。你可能有例如。改为拖放。浏览器决定这一点；作为网站作者，您不会看到。

我们希望文本框和按钮的外观和感觉与我们网站的其他部分使用相同的 CSS。

这在 HTML 领域是不可能的。因此，“第三方上传者”，通常是带有 HTML 后备的 Flash。

您可以使用one approach 使文件上传看起来像您想要的那样，但这不是很好。您可以随意设置文本字段和按钮的样式，监听文件上传字段的更改并将值复制到要显示的文本字段。文本字段必须是只读的，因为不允许用户从那里选择文件。

然后，您将真实的文件上传控件放在具有 CSS 定位的假文件的顶部，并赋予它 CSS 不透明度（IE 中的 alpha 过滤器），这样它就非常模糊，您看不到它。然后，您必须希望浏览器决定将文件上传字段的可点击部分放在您呈现按钮的顶部。尽管您可以在许多流行的浏览器中调试并检查它，但它确实非常脆弱，几乎可以肯定是完全浪费时间。

【讨论】：

嗨，鲍勃，感谢您的详细回答，它提供了很多信息。我同意其实施背后有许多安全原因。通过添加 Flash 等要求，我们可能会危及使用旧版浏览器或禁用 Flash 的用户的访问权限。我认为保持原样将是最好/最安全的解决方案。
是的，这就是为什么任何 Flash 解决方案都应该作为“渐进增强”来工作，为非 Flash 用户留下一个正常的 HTML 文件上传字段。

【解决方案3】：

您不会获得一致的用户界面。每个浏览器都有自己的实现。 Safari 用户会期望 Safari 方法，IE 等也是如此。

您可能在对框的 CSS 控制方面取得了一些成功，但请注意，现代浏览器在该领域具有很多安全性。与字段相比，您对该字段的控制有限

【讨论】：