html文件上传表单

时间:2009-10-12 01:20:45

标签: html file upload cross-browser

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

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

我们在实施文件上传控件时遇到了问题:

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

按钮没有正确点击,不同的输入法(例如点击某些浏览器中的文本框会打开输入栏)。

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

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

非常感谢任何帮助。

编辑:

以下是一些更具体的行为细节:

拟/预期:

一致使用文本框字段(对于文件名):

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

一致使用浏览按钮:

  • 与外观标准HTML按钮相同的css标准
  • 打开浏览对话框
  • 对话框取消 - 清除文本框字段
  • 对话框确定 - (重新)填充文本框字段

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

电流:

  • 文本框点击事件打开对话框
  • 文本框和按钮字段的通用显示
  • 浏览按钮无法使用某些浏览器(不会触发浏览对话框事件,但会显示)

所有浏览器类型之间的行为(上述事件/操作)应尽可能一致。

3 个答案:

答案 0 :(得分:7)

  

使其与所有浏览器兼容的最佳方法是什么?

它已与所有浏览器兼容。只是不要太努力编写脚本或彻底改变风格。您在文件上传字段中具有最小的自定义可能性,部分原因是出于明显的安全原因,部分原因是许多浏览器中文本+按钮排列的多部分渲染根本不适合在单个框上运行的基元样式。

  

(例如,点击某些浏览器中的文本框将打开输入字段。)

幸运的是,那些浏览器会这样做的人已经习惯用来上传文件了。实际上,他们希望浏览器能够做到这一点,如果你设法阻止它,就会感到困惑。

(这是一个明智的衡量标准:允许输入文件名字段很少有用,但过去曾造成安全漏洞。)

  

一致使用浏览按钮:

文件上传字段甚至都没有强制要求浏览按钮或文件查找器对话框。你可能有例如。而是放弃。浏览器决定这一点;作为网站作者,你不看。

  

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

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

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

然后你将真正的文件上传控件放在带有CSS定位的虚假文件上面,并给它CSS不透明度(IE中的alpha过滤器),这样它就是如此微弱,你看不到它。然后,您必须希望浏览器决定将文件上载字段的可单击部分放在您呈现按钮的位置的顶部。虽然你可以在许多流行的浏览器中调整并检查它,但它确实非常脆弱,几乎肯定是完全浪费时间。

答案 1 :(得分:1)

您将无法获得一致的用户界面。每个浏览器都有自己的实现。 Safari用户可以使用Safari方法,IE也是如此。

您可能会对该框的CSS控件取得一些成功,但请注意,现代浏览器在此字段上具有很多安全性。与字段

相比,您将对此字段进行有限的控制

答案 2 :(得分:-1)

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

至于造型 - 这是一项任务。确保您支持的所有浏览器中的HTML和CSS兼容(按预期工作)。