0

I would like the same input to accept audio/video/image files only.

What is the correct accept attribute value for this?

For images I only need to support gif/jpeg/jpg/png.

currently I am testing this:

accept="image/video/audio/png/gif/jpeg/jpg/mp3/mp4,video/x-m4v,video/*"
Luke Peterson
  • 8,584
  • 8
  • 45
  • 46
CodeToad
  • 4,656
  • 6
  • 41
  • 53

2 Answers2

2

You can specify additional MIME types and/or extensions if you need:

accept="video/*,audio/*,image/gif,image/jpeg,image/png,.gif,.jpeg,.jpg,.png"

Documentation: File Upload state (type=file)

Igor Gilyazov
  • 777
  • 1
  • 6
  • 14
0

Demo Fiddle

function handleFileSelect(evt) {
    var validExtensions = ["jpg", "jpeg", "gif", "png", "mp3", "mp4"];
    var files = evt.target.files[0];
    var ext = files.name.split('.').pop();
    if (validExtensions.indexOf(ext) > -1) {
        alert("Valid");
    } else {
        alert("Invalid");
    }
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);  

This method is based on comparing the extension of the uploaded file with the array of valid extensions. So user can easily validate this by changing the extension of the file.
For ex. Renaming the image.bmp to image.jpg

Reference:
1. For File Extension

Community
  • 1
  • 1
Bhavik
  • 4,836
  • 3
  • 30
  • 45