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);">

Austin · Accepted Answer · 2012-07-12T12:21:05.623

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;
}

edited Jul 12 '12 at 12:21

answered Jul 12 '12 at 02:02

Austin

6,026
2
24
24

do I just wrap that with `script` tags or do is wrap it with the full `` ? I tried both, and it's validating an image only but now its not loading the next file field – Keezy Jul 12 '12 at 02:25
I had to change `$('form').append( $("").attr({type: file}) );` to `$('form').append( $('') );` – Keezy Jul 12 '12 at 03:22
Ah... I was missing the quotes around `type: "file"` Either methods should work now, and no problem. – Austin Jul 12 '12 at 12:21

score 0 · Answer 2 · edited May 23 '17 at 12:20

0

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

edited May 23 '17 at 12:20

Community

1
1

answered Jul 12 '12 at 01:22

Austin

6,026
2
24
24

thanks, the limit part works great, but `accept` is not fully cross-browser compatible which is why I didn't go with my prior method. – Keezy Jul 12 '12 at 01:31
Right, then the answer I posted should be of best use to you. – Austin Jul 12 '12 at 01:34
my `CheckExtension` function above works great in all browsers (that I've tested so far), how can I combine that with the new javascript code? – Keezy Jul 12 '12 at 01:44
when I tried `i < 5 ? form.append('') : "";` it worked, but it still makes an addition upload field when the file is not an image. if the file is not an image can't I stop it from creating the next upload field? – Keezy Jul 12 '12 at 01:48

score 0 · Answer 3 · answered Jul 12 '12 at 03:21

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>

if anyone see any possible problems with this, please let me know as I am always open to suggestions and improvement — Keezy, Jul 12 '12 at 03:24

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

3 Answers3