Validate image type using javascript

Question

hi, i have a form like this:

<form method=post src=upload enctype="multipart/form-data">
    <input name="img1" id="img1" type="file">
    <input type="submit" value="Upload">
</form >

Please how can I valid this form using javascript so that only jpg files are uploaded. thanks for reading.

Answer 1

A Google search unearthed this: http://www.webdeveloper.com/forum/archive/index.php/t-104406.html

For your application, I would recommend running the input through:

function valid(a){
    return a.indexOf(".jpg") != -1 && a.type == file;
}

That should work.

Answer 2

You can use the "accept" paramter to the input tag:

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

Its not JavaScript but should still be helpful to prevent the user from even attempting to upload a non-image file.

Answer 3

71944 has some javascript that looks like it might do what you need. Bear in mind that it's only client side validation, so you'll still want to validate it on the server too.

Answer 4

You can bind the onsubmit event of your form, and check if the value of your file input ends with ".jpg" or ".jpeg", something like this:

window.onload = function () {
  var form = document.getElementById('uploadForm'),
      imageInput = document.getElementById('img1');

  form.onsubmit = function () {
    var isValid = /\.jpe?g$/i.test(imageInput.value);
    if (!isValid) {
      alert('Only jpg files allowed!');
    }

    return isValid;
  };
};

Check the above example here.