HTML: How to restrict file downloads to images only?

Question

With HTML, how can I limit what types of files can be downloaded?

To simplify the work with the user, I want to limit the downloading of files only to images (jpeg, gif, png).

<form method="post" action="..." enctype="multipart/form-data"> <label for="image">Photo</label> <input name="image" type="file" /> </form> 

Answer 1

HTML5 says <input type="file" accept="image/*"> . Of course, never trust client-side validation: always verify the server-side ...

Answer 2

HTML5 A file entry has an accept attribute, as well as several attributes. Using multiple attributes, you can upload multiple images to an instance.

 <input type="file" multiple accept='image/*'> 

You can also limit several types of mime.

 <input type="file" multiple accept='image/*|audio/*|video/*' > 

and another way to check the mime type using a file object.

file object gives name, size and type.

 var files=e.target.files; var mimeType=files[0].type; // You can get the mime type 

You can also limit the user to downloading certain types of files using the code above.

Answer 3

Edited

If everything was the way it MUST be, you can do this with the Accept attribute.

http://www.webmasterworld.com/forum21/6310.htm

However, browsers pretty much ignore it, so it's unflagging. Short answer: I don't think there is a way to do this in HTML. You will need to check this on the server side.

The following old post contains some information that might help you with alternatives.

The accept attribute for input - is it useful?

Answer 4

Here is the HTML for uploading the image. By default, it will only show image files in the viewport, because we put accept="image/*" . But we can still change it from the drop-down list, and it will display all the files. Therefore, the Javascript part checks to see if the selected file is actual.

  <div class="col-sm-8 img-upload-section"> <input name="image3" type="file" accept="image/*" id="menu_images"/> <img id="menu_image" class="preview_img" /> <input type="submit" value="Submit" /> </div> 

Here, in case of a change, we first check the image size. And in the second if state, we check if this is an image file.

this.files[0].type.indexOf("image") will be -1 if it is not an image file.

 document.getElementById("menu_images").onchange = function () { var reader = new FileReader(); if(this.files[0].size>528385){ alert("Image Size should not be greater than 500Kb"); $("#menu_image").attr("src","blank"); $("#menu_image").hide(); $('#menu_images').wrap('<form>').closest('form').get(0).reset(); $('#menu_images').unwrap(); return false; } if(this.files[0].type.indexOf("image")==-1){ alert("Invalid Type"); $("#menu_image").attr("src","blank"); $("#menu_image").hide(); $('#menu_images').wrap('<form>').closest('form').get(0).reset(); $('#menu_images').unwrap(); return false; } reader.onload = function (e) { // get loaded data and render thumbnail. document.getElementById("menu_image").src = e.target.result; $("#menu_image").show(); }; // read the image file as a data URL. reader.readAsDataURL(this.files[0]); }; 

Answer 5

You can do this safely only on the server side. Using the accept attribute is good, but should also be checked on the server side so that users cannot cURL to your script without restrictions.

I suggest you: refuse any file without an image, warn the user and re-display the form.

Answer 6

Ultimately, the filter displayed in the Browse window is set by the browser. You can specify all the filters that you want in the Accept attribute, but you have no guarantee that your custom browser will adhere to it.

It’s best to do some kind of filtering on the back of the server.

Answer 7

 <script> function chng() { var typ=document.getElementById("fiile").value; var res = typ.match(".jp"); if(res) { alert("sucess"); } else { alert("Sorry only jpeg images are accepted"); document.getElementById("fiile").value="; //clear the uploaded file } } </script> 

Now in the html part

 <input type="file" onchange="chng()"> 

this code checks if the downloaded file is a jpg file or not, and restricts other types of downloads

Answer 8

Place an order for the project under the name "Download". http://www.uploadify.com/

This is a Flash + jQuery downloadable file. This uses the Flash file selection dialog, which gives you the ability to filter file types, select multiple files at the same time, etc.