Results 1 to 5 of 5

Thread: validate JPG

  1. #1
    Join Date
    Jul 2008
    Posts
    81
    Thanks
    38
    Thanked 2 Times in 2 Posts

    Default validate JPG

    I have:
    <input type="file" />
    in my site with a submit button,
    How can I validate that this is a .jpg file?

    Thanks!

  2. #2
    Join Date
    Jan 2008
    Posts
    4,167
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Add this to the <head> part of your document:
    Code:
    <script type="text/javascript">
    function checkJPG(id){
    var el = document.getElementById(id);
    var patterna = /jpg$/i;
    var patternb = /jpeg$/i;
    if(!(patterna.test(el.value) || patternb.test(el.value))){
      alert("Your photo format is not a JPEG.");
    }
    };
    </script>
    And then add an ID attribute to your file tag, and on your submit button, add:
    Code:
    onclick="checkJPG('id');"
    (Change the highlighted)

    Good luck.
    Jeremy | jfein.net

  3. The Following User Says Thank You to Nile For This Useful Post:

    lord22 (11-07-2009)

  4. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,925
    Thanks
    43
    Thanked 3,187 Times in 3,151 Posts
    Blog Entries
    12

    Default

    My version:

    Code:
    function valJpg(file){
    	if(!/\.jpe{0,1}g$/i.test(file.value)){
    		alert('.jpg Images Only Please.');
    		var newFile = document.createElement('input');
    		newFile.type = 'file';
    		newFile.onchange = file.onchange;
    		file.parentNode.replaceChild(newFile, file);
    	}
    }
    HTML Code:
    <input type="file" onchange="valJpg(this);">
    You may need to include other attributes of your original file input if it has them, example:

    Code:
    function valJpg(file){
    	if(!/\.jpe{0,1}g$/i.test(file.value)){
    		alert('.jpg Images Only Please.');
    		var newFile = document.createElement('input');
    		newFile.type = 'file';
    		newFile.name = file.name;
    		newFile.onchange = file.onchange;
    		file.parentNode.replaceChild(newFile, file);
    	}
    }
    Which would be required for form submission, etc.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. The Following User Says Thank You to jscheuer1 For This Useful Post:

    lord22 (11-07-2009)

  6. #4
    Join Date
    Jul 2008
    Posts
    81
    Thanks
    38
    Thanked 2 Times in 2 Posts

    Default

    Thank you both

  7. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,925
    Thanks
    43
    Thanked 3,187 Times in 3,151 Posts
    Blog Entries
    12

    Default

    I came up with another version which would preserve the idiosyncratic ways that input fields behave in various browsers, which may or may not be desirable, and also eliminates the need to add in various characteristics of the file input into the function:

    Code:
    function valJpg(file){
    	if(!/\.jpe{0,1}g$/i.test(file.value)){
    		alert('.jpg Images Only Please.');
    		file.parentNode.replaceChild(valJpg.file.cloneNode(true), file);
    	}
    }
    HTML Code:
    <input id="myFile" type="file" onchange="valJpg(this);">
    <script type="text/javascript">
    valJpg.file = document.getElementById('myFile').cloneNode(true);
    </script>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •