limit how many dynamic form fields are shown and validate as image with javascript

Question

I have the following jquery enabled javascript:

<form>
    <input type="file">
</form>

jQuery(function($) {

  $('form').delegate('input[type=file]', 'change', function() {
    var form = $(this).closest('form');
    form.append('<input type="file">');
  });

});

it will dynamically add a file upload field as the user add files they want to upload. how can I limit it to images only, and stop adding new fields after they've added 5 images?

I'm trying to switch from having numerous field, which I validated as images like so:

var valid_extensions = /(.gif|.jpg|.jpeg|.png)$/i;
function CheckExtension(fld){
  if (valid_extensions.test(fld.value)) return true;
  alert('only gif, png or jpg formats are allowed!');
  fld.select();
  fld.value="";
  fld.focus();
  return false;
}

<input type="file" onChange="return CheckExtension(this);">

Answer 1

Knowing your goal, you should rewrite your function:

var checkExtension;
var valid_extensions = /(.gif|.jpg|.jpeg|.png)$/i;
var limit = 5; // define the limit of rows here
var i = 0;
$('form').delegate("input[type=file]", "change", function () {
    if (i < limit && checkExtension(this)) {
        $('form').append( $("<input>").attr({type: "file"}) );
    }
    i++;
});
checkExtension = function (fld) {
    if (valid_extensions.test(fld.value)) return true;
    alert('only gif, png or jpg formats are allowed!');
    fld.select();
    fld.value="";
    fld.focus();
    return false;
}

Answer 2

You can use HTML5's accept attribute to specify which mimetypes you will accept.

For your limit, a simple incrementing integer and a ternary should handle it, like so:

var i = 0;
$('form').delegate('input[type=file]', 'change', function() {
  var form = $(this).closest('form');
  i < 5 ? form.append('<input type="file">') : "";
  i++;
});

If you want to use javascript, a google search returned this Stack Overflow answer: Preview an image before it is uploaded

Answer 3

With the help of @Austin, here is the final code that works for me. it will dynamically create a file input field and accept images only. I'm still testing, but this should work in all browsers that support js.

<form>
<input type="file">

<script>
jQuery(function($) {

    var checkExtension;
    var valid_extensions = /(.gif|.jpg|.jpeg|.png)$/i;
    var limit = 5; // define the limit of rows here
    var i = 1;
    $('form').delegate("input[type=file]", "change", function () {
        if (i < limit && checkExtension(this)) {
            $('form').append( $('<input type="file">') );
        }
        i++;
    });
    checkExtension = function (fld) {
        if (valid_extensions.test(fld.value)) return true;
        alert('only gif, png or jpg formats are allowed!');
        fld.select();
        fld.value="";
        fld.focus();
        return false;
    }

});
</script>
</form>