2

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

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

是否有任何 javascript 方法来显示进度？

4

5 回答 5

3

输入标签中有一个接受属性，但并非所有浏览器都支持。这是一个例子：

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

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

于 2010-07-02T13:19:39.050 回答
2

我如何将我的表单限制为只接受 jpeg 文件

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

Edit And Gert G 指出，这里的accept属性可以给浏览器一个提示，这对于支持它的浏览器来说很好。

是否有任何 javascript 方法来显示进度？

不直接，不。有时可以间接显示进度，方法是在上传的同时使用一系列定时的 ajax 请求，让服务器告诉你到目前为止它收到了多少，但这充满了困难，可能不值得费心。

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

当然，如果您想使用专有的（但非常普遍）的东西，像SWFUpload这样的 Flash 上传器会显示进度等。（闪光，我的意思是。）

于 2010-07-02T13:14:19.330 回答
1

这不能在纯 HTML/Javascript 中完成，但有几个基于 Flash 的组件可以做到这一点——例如Uploadify。

如果你能忍受这个限制，那么在 SO 上有很多关于这个的问题（有很好的答案） 。

于 2010-07-02T13:19:27.613 回答
1

没有纯 html 方式来显示某些文件类型，也没有简单的 javascript 方式。

我使用了一个名为 FancyUpload 的包：http://digitarald.de/project/fancyupload/它为我处理这部分。此外，它会按照您的要求显示下载进度条。

我应该提一下，我发布的上传器需要您包含一个名为 MooTools 的 JavaScript 框架。如果您更喜欢 jQuery（例如 uploadify）或其他框架，还有其他类似的上传器可用。

请确保您还检查了服务器端。

于 2010-07-02T13:20:27.360 回答
1

您可以使用<input name="image" type="file" accept="image/jpeg">来限制用户的选择。但是您仍然需要检查服务器中的文件类型。

显然，如果不开始上传就无法显示进度，因此您应该首先寻找一个服务器端 api，以使客户端更新上传状态。至于 javascirpt 进度条，每个 javascript 库都有一个，例如jquery 进度条

于 2010-07-02T13:29:44.003 回答