html文件上传表单

Rus*_*ell 2 html upload file cross-browser

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

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

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

<input type="file" ... />
Run Code Online (Sandbox Code Playgroud)

按钮未正确单击并且不同的输入方法(例如,在某些浏览器中单击文本框将打开输入字段).

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

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

任何帮助都非常感谢.

编辑:

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

拟/预期:

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

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

一致使用浏览按钮:

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

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

当前:

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

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

bob*_*nce 7

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

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

(例如,在某些浏览器中单击文本框将打开输入字段).

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

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

一致使用浏览按钮:

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

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

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

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

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