HTML 上传表单中的文件类型

发布于 2024-09-08 14:44:32 字数 137 浏览 11 评论 0 原文

如何限制我的表单仅接受 jpeg 文件?现在它显示所有文件。

<input name="image" type="file" />

有没有什么javascript方法可以显示进度?

How can i limit my form to only accept jpeg files? Now it shows all files.

<input name="image" type="file" />

And are there any javascript method to show progress?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

机场等船 2024-09-15 14:44:32

input标签中有一个accept属性,但并非所有浏览器都支持。这是一个示例:

<input type="file" name="image" id="image" accept="image/jpeg" />

这可能是您的第一次检查,但您的主要检查必须在接受文件时在服务器上进行。

There is an accept attribute in the input tag, but it's not supported by all browsers. Here's an example:

<input type="file" name="image" id="image" accept="image/jpeg" />

It could be your first check, but your main check must be on the server when accepting the file.

自此以后,行同陌路 2024-09-15 14:44:32

如何限制我的表单仅接受 jpeg 文件

大多数情况下,你不能。您必须在服务器上进行检查(无论如何您都需要这样做,即使您可以在客户端进行检查;您永远不能信任任何客户端验证) 。但情况正在改善。新的 W3C 的文件 API 即将推出,它您可以在支持它的浏览器上使用(目前主要是 Firefox;这是 Mozilla 的一项举措),只是为了为使用现代浏览器的用户提供更好的用户体验。

编辑并且Gert G指出这是accept 属性< /a> 可以给浏览器一个提示,这对于支持它的浏览器来说是很好的。

有没有什么javascript方法可以显示进度?

不直接,不。有时可以通过在上传的同时使用一系列定时的 ajax 请求并让服务器告诉您到目前为止已收到多少内容来间接显示进度,但这充满了困难,而且可能不值得麻烦。

这是文件 API 可以提供帮助的另一个领域,尽管您可能会发现在此过程中引入了相当多的延迟:基本上,您可以在本地读取文件的一大块,通过 ajax 将其发送到服务器,更新进度,读取并发送下一个块等。

当然,还有 Flash 上传器,例如 SWFUpload 等,可以显示进度等,如果您想使用专有的东西(但非常广泛)。 (我是说,闪光。)

How can i limit my form to only accept jpeg files

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.

And are there any javascript method to show progress?

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.)

初懵 2024-09-15 14:44:32

没有纯 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.

反差帅 2024-09-15 14:44:32

这不能用纯 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.

后来的我们 2024-09-15 14:44:32

您可以使用 来限制用户的选择。但您仍然需要检查服务器中的文件类型。

显然,如果不开始上传,您就无法显示进度,因此您应该首先寻找一个服务器端 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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文