html文件上传表单

Question

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

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

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

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

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

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

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

非常感谢任何帮助。

编辑:

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

预期/预期:

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

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

浏览按钮的一致使用:

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

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

当前:

• 文本框点击事件打开对话框
• 文本框和按钮字段的一般显示
• 浏览按钮不适用于某些浏览器(不触发浏览对话框事件，但正在显示)

行为(如上所述的事件/ Action )应尽可能在所有浏览器类型之间保持一致。

Answer 1

What is the best way to make this compatible with all browsers?

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

(eg clicking on the text box in some browsers will open the input field).

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

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

Consistent use of browse button:

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

We would like to have the look and feel of the textbox and button to use the same css as the rest of our web site.

这在 HTML 领域内是不可能的。因此出现了“第三方 uploader ”，通常是带有 HTML 后备的 Flash。

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

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