HTML 上传表单中的文件类型
如何限制我的表单仅接受 jpeg 文件?现在它显示所有文件。
<input name="image" type="file" />
有没有什么javascript方法可以显示进度?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
如何限制我的表单仅接受 jpeg 文件?现在它显示所有文件。
<input name="image" type="file" />
有没有什么javascript方法可以显示进度?
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
接受
或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
发布评论
评论(5)
input标签中有一个accept属性,但并非所有浏览器都支持。这是一个示例:
这可能是您的第一次检查,但您的主要检查必须在接受文件时在服务器上进行。
There is an accept attribute in the input tag, but it's not supported by all browsers. Here's an example:
It could be your first check, but your main check must be on the server when accepting the file.
大多数情况下,你不能。您必须在服务器上进行检查(无论如何您都需要这样做,即使您可以在客户端进行检查;您永远不能信任任何客户端验证) 。但情况正在改善。新的 W3C 的文件 API 即将推出,它您可以在支持它的浏览器上使用(目前主要是 Firefox;这是 Mozilla 的一项举措),只是为了为使用现代浏览器的用户提供更好的用户体验。
编辑并且Gert G指出这是
accept
属性< /a> 可以给浏览器一个提示,这对于支持它的浏览器来说是很好的。不直接,不。有时可以通过在上传的同时使用一系列定时的 ajax 请求并让服务器告诉您到目前为止已收到多少内容来间接显示进度,但这充满了困难,而且可能不值得麻烦。
这是文件 API 可以提供帮助的另一个领域,尽管您可能会发现在此过程中引入了相当多的延迟:基本上,您可以在本地读取文件的一大块,通过 ajax 将其发送到服务器,更新进度,读取并发送下一个块等。
当然,还有 Flash 上传器,例如 SWFUpload 等,可以显示进度等,如果您想使用专有的东西(但非常广泛)。 (我是说,闪光。)
Mostly, you can't. You have to check at the server (which you need to do anyway, even if you can check at the client; you can never trust client-side validation, of anything). But things are improving. There is the new File API from the W3C coming down-the-pike, which you could use on browsers that support it (Mostly Firefox, at the moment; it was a Mozilla initiative), just for a better user experience for those with modern browsers.
Edit And Gert G points out that here's the
accept
attribute that can give a hint to the browser, which is nice for browsers that support it.Not directly, no. It's sometimes possible to show progress indirectly, by using a timed series of ajax requests alongside the upload and having the server tell you how much it had received so far, but it's fraught with difficulty and probably not worth the bother.
This is another area where the file API could help, although you might find you introduced a fair bit of latency in the process: Basically, you could read a chunk of the file locally, send that to the server via ajax, update progress, read and send the next chunk, etc.
There are, of course, Flash uploaders like SWFUpload that show progress and such, if you want to use something proprietary (but incredibly widespread). (Flash, I mean.)
没有纯 html 方式来显示某些文件类型,也没有简单的 javascript 方式。
我使用一个名为 FancyUpload 的包: http://digitarald.de/project/fancyupload/ 处理这部分对我来说。此外,它还会按照您的要求显示下载进度条。
我应该提到的是,我发布的上传程序需要您包含一个名为 MooTools 的 javascript 框架。如果您更喜欢 jQuery(例如 uploadify)或其他框架,还有其他类似的上传器可用。
请确保您还检查服务器端。
There is no pure html way to show certain file types, and there is no easy javascript way either.
I use a package called FancyUpload: http://digitarald.de/project/fancyupload/ which handles this part for me. Also, it will show the download progress bar as you've asked.
I should mention that the uploader I posted needs you to include a javascript framework called MooTools. There are other similar uploaders available if you prefer jQuery (such as uploadify) or another framework.
Please, make sure that you also check on the server side.
这不能用纯 HTML/Javascript 来完成,但有几个基于 Flash 的组件可以做到这一点 - 例如 Uploadify。
如果您可以忍受这个限制,那么有很多关于此的问题(有很好的答案)这里。
This can't be done in plain HTML/Javascript, but there are several Flash-based components that can do this - e.g. Uploadify comes to mind.
If you can live with this limitation, there's plenty of questions about this (with good answers) here on SO.
您可以使用
来限制用户的选择。但您仍然需要检查服务器中的文件类型。
显然,如果不开始上传,您就无法显示进度,因此您应该首先寻找一个服务器端 api,使客户端能够更新上传状态。至于 javascirpt 进度条,每个 javascript 库都有一个,例如 jquery 进度条
You can use
<input name="image" type="file" accept="image/jpeg">
to limit the users choice. But you still need to check the file type in the server.You can obviously not display progress without starting the upload, so you should be first looking for a server side api that keep the client updated on the state of the upload. As for javascirpt progress bars every javascript library has one e.g. jquery progress bar