• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 692
  • Last Modified:

jquery that checks attached image file type

Hi experts,

I am working on a CMS builder and its bulletin is giving me an error when I try to attach jpg/jpeg image file.
I am trying to add jquery that will prevent jpg image file upload, but it pops up when I just write something without uploading img file.

could you check plz?
jquery 

    // check attached image file type
 var imgno = "0"; // fine number
 var nono = "0";   // error check variable 
 $("input[name=bf_file[]]").each(function() {
  var imgval = $(this).val();
  
  imgno++;
  if (!imgval.toLowerCase().match(/.(gif|png)$/i)) {  // ¿¿¿¿ ¿¿¿¿ ¿¿¿¿¿ ¿¿¿.
   alert(imgno+ " a file is not gif nor png file.");
   nono = "1";
   return false;
  }
 });
 if (nono == 1) {
  return false;
 }

Open in new window

0
dkim18
Asked:
dkim18
  • 2
1 Solution
 
Julian HansenCommented:
Here is a working sample
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
  $('form').submit(function() {
    var imgno = "0"; // fine number
	var rv = true;
    $("input[type=file]").each(function() {
      var imgval = $(this).val();
	  if (!imgval.match(/^.*[gif|png]$/i)) {
        alert($(this).attr('name') + ' is not a gif or png file');
		rv = false;
	  }
    });
    return rv;
  });
});
</script>
</head>
<body>
<form>
  File 1 <input type="file" name="file1" /><br/>
  File 2 <input type="file" name="file2" /><br/>
  File 3 <input type="file" name="file3" /><br/>
  File 4 <input type="file" name="file4" /><br/>
  <input type="submit" />
</form>
</body>
</html>

Open in new window

0
 
dkim18Author Commented:
Hm...it shouldn't alert without any attach files...
0
 
Julian HansenCommented:
B? You never specified it must not alert on blank. Just make the following change?
Please read the grading guidelines here http://www.experts-exchange.com/help/viewHelpPage.jsp?helpPageID=26
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
  $('form').submit(function() {
    var imgno = "0"; // fine number
	var rv = true;
    $("input[type=file]").each(function() {
      var imgval = $(this).val();
	  if (imgval != '' && !imgval.match(/^.*[gif|png]$/i)) {
        alert($(this).attr('name') + ' is not a gif or png file');
		rv = false;
	  }
    });
    return rv;
  });
});
</script>
</head>
<body>
<form>
  File 1 <input type="file" name="file1" /><br/>
  File 2 <input type="file" name="file2" /><br/>
  File 3 <input type="file" name="file3" /><br/>
  File 4 <input type="file" name="file4" /><br/>
  <input type="submit" />
</form>
</body>
</html>

Open in new window

0

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now