Filetype in HTML upload form

Question

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?

Answer 1

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

Answer 2

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.

Answer 3

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.

Answer 4

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.

Answer 5

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