javascript accept only image not working

Question

In my code I want to accept only image file.otherwise it will not accept and will give alert that its not image file.

I have done below code in jsfiddle:--

jsfiddle link

but the problem is it..It is not giving any message.what am I doing wrong?

How I can i check it??it will depend on size. extension name will convert the file — Salini, Oct 03 '15 at 05:27
By detecting the mime type, Here is how -> http://stackoverflow.com/questions/4264289/detecting-a-files-content-type-when-using-javascripts-filereader-interface — Jesse, Oct 03 '15 at 05:28
This is the example of text files..what will be for image file?and the guy has not accepted any answer. — Salini, Oct 03 '15 at 05:31
Then you look up the mime types for image files of course :) See the second answer from my link on how they are checking the mime type and here is what seems to be a big list of mime types -> http://www.sitepoint.com/web-foundations/mime-types-complete-list/ — Jesse, Oct 03 '15 at 05:32
Your question is however answered below. This is a discussion for another thread if you decide to go this route in the future — Jesse, Oct 03 '15 at 05:33

score 3 · Accepted Answer · answered Oct 03 '15 at 05:25

3

https://jsfiddle.net/weufx7dy/2/

You forgot to add id on file element

<input type="file" id="file" name="fileUpload" size="50" />

answered Oct 03 '15 at 05:25

Man Programmer

5,300
2
21
21

score 1 · Answer 2 · answered Oct 03 '15 at 05:51

You had used

 var image =document.getElementById("file").value;

but forgot to give id to file control so give that

<input type="file" name="fileUpload" id="file" size="50" />

and try following code in w3schools tryit browser and use onClick event on submit button instead of onSubmit

<!DOCTYPE html>
<html>
<body>

<div align="center">

    <form:form modelAttribute="profilePic" method="POST"enctype="multipart/form-data" action="/SpringMvc/addImage">

                <input type="file" name="fileUpload" id="file" size="50" />


                <input type="submit" value="Add Picture" onClick="Validate();"/>

    </form:form>
</div>

<script>
  function Validate(){
  var image =document.getElementById("file").value;

 if(image!=''){
    var checkimg = image.toLowerCase();
    if (!checkimg.match(/(\.jpg|\.png|\.JPG|\.PNG|\.gif|\.GIF|\.jpeg|\.JPEG)$/)){
      alert("Please enter Image File Extensions .jpg,.png,.jpeg,.gif");
      document.getElementById("file").focus();
      return false;
   }
 }
 return true;
}
</script>

</body>
</html>

score 0 · Answer 3 · answered Oct 03 '15 at 05:21

0

Use this :

userfile.addEventListener('change', checkFileimg, false);

    function checkFileimg(e) {

    var file_list = e.target.files;

    for (var i = 0, file; file = file_list[i]; i++) {
    var sFileName = file.name;
    var sFileExtension = sFileName.split('.')[sFileName.split('.').length - 1].toLowerCase();
    var iFileSize = file.size;
    var iConvert = (file.size / 10485760).toFixed(2);

    if (!(sFileExtension === "jpg")) {
    txt = "File type : " + sFileExtension + "\n\n"; 
    txt += "Please make sure your file is in jpg format.\n\n";
    alert(txt);
    document.getElementById('userfile').value='';
    }
    }
    }

answered Oct 03 '15 at 05:21

Bugfixer

2,547
2
26
42

Please be sure to credit where you are taking these functions from before just renaming the name of it as your own -> http://stackoverflow.com/questions/22364527/javascript-listener-on-load-not-loading – Jesse Oct 03 '15 at 05:23
1

I have been using this for a year.There is no harm in using code given on stackoverflow. i copied the same from my source file not from stackoverflow right now. – Bugfixer Oct 03 '15 at 05:25
I didn't downvt you, but see the answer above yours – Jesse Oct 03 '15 at 05:26

javascript accept only image not working

3 Answers3