form file validation extension and size jquery or jscript

Question

Hi my problem is that i have a form that expands dynamically. I will use it to upload the files to e-commerce website to upload the products pictures, i want to limit the size and filter the extensions before upload, but i am a noob with javascript, and/or jQuery...

i need help to validate those, because i think i can handle the PHP side of things :) here is my experimental code:

<script language="Javascript" type="text/javascript">
var counter = 1;
var limit = 10;
function addInput(divName){
     if (counter == limit)  {
          alert("You have reached the maximum of " + counter + " fotos");
     }
     else {
          var newdiv = document.createElement('div');
          newdiv.innerHTML = "Foto " + (counter + 1) + " <br><input type='file' name='myInputs[]'>";
      document.getElementById(divName).appendChild(newdiv);
      counter++;
 }
}
</script>

<form method="POST" enctype="multipart/form-data"> 
     <div id="dynamicInput">
          Foto 1<br><input type="file" name="myInputs[]">
 </div>
 <input type="button" value="Add more fotos" onClick="addInput('dynamicInput');">
</form>

thank you in advance

EDIT:

ok i can verify the type of files submitted but i cannot loop through the different file fields...

i have this code on fiddle http://jsfiddle.net/Glink/sGCeK/

it may help you help me...

one more question, if i have my code in xHTML is it very hard to update to HTML5?

once again thank you in advance...

score 1 · Accepted Answer · edited May 23 '17 at 12:04

You're on the right track, however you should try using jQuery with your javascript. I think you will find things a lot easier. I've written a quick example of what I think you are looking to accomplish. If you need further explanation, feel free to ask.

Example

HTML:

<form method="POST" enctype="multipart/form-data" id="theForm"> 
 <label class="dynamicInput">
      Foto 0<input type="file" name="myInputs1">
 </label>
<br/>
</form>

JS:

var counter = 1;
var limit = 10;


$("#addButton").click(function(){
htmlString = '<label class="dynamicInput">Foto'+ counter +'<input type="file" name="myInputs '+ counter + '"></label><br/>'

 if(limit > counter)
$("#theForm").append(htmlString);
counter++;
});

UPDATE: Miss read the question, I thought you were looking just to append new fields to the box. For file size of uploads, you can get that number by using:

this.files[0].fileSize

Example: Updated Example

As for checking extensions there isn't an easy way that i've found to do this. You will probably will need to use some sort of regex. Something like this:

File Extension Example

That should put you on the right path.

thank you for the answer, but it don't seem to limit the type of files to up load or the size of the file, and that is my objective. But maybe i didn't express my self correctly sorry for that... — Fernando Andrade, Nov 08 '12 at 21:36
Sorry miss read, ill see if i can modify that part, but thats a bit more complex — AJak, Nov 08 '12 at 21:40
i'm sorry but didn't notice your edit untill now, this is all new for me... ended up finding a lot of things by my self and will put it in my answer bu i will choose your answer because you helped me and you are more experienced than me so i think that should count, and i think that this way is fair :) please forgive me for my noob mistake and thank you. — Fernando Andrade, Nov 13 '12 at 11:04

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

Hi this is awkward to end up answering my own question but here it is:

the verify the file type and the loop is on this fiddle: http://jsfiddle.net/Glink/sGCeK/

$(document).ready(function() {

    var counter = 1;
    var limit = 5;
    $("#btn2").click(function() {

        if (counter == limit) {
            alert("You have reached the limit of " + counter + " fotos");
        } else {
            $("#dynamicInput").append("<br>Foto <br><input class='test' type='file' name='myInputs[]'>");
        }
        counter++;
    });


    $("form").submit(function() {

        $('.test').each(function(i, obj) {

            var file = $(this).val();
            var ext = $(this).val().substr(($(this).val().lastIndexOf('.') + 1));
            //alert(file);
            if (ext == "jpg" || ext == "png" || ext == "JPG" || ext == "jpeg") {
                alert("File: " + file + " Valid");
                //return true;
            } else {
                alert("Invalid file only files with extension. Jpeg,. Jpg or. Png are accepted.");
                return false;
            }
        });
    });
});

I have not been capable of looping when i edited my first post because i forgot to add the class to the add field button, and since i'm not used to the language, i missed that, found the issue when reviewing the code...

so this is my final edit, the end code of my implementation is here: http://jsfiddle.net/Glink/Ak2QA/

i don't know if i am using good practices but it is working for now,when this project end i will learn more jQuery and js...

what comes to the file size since i'm using xHTML it is just impossible using JavaScript i wuld have to use Flash or SilverLight and i don't want to so i wont use...

if i was using HTML5 it would be possible, using what is posted here: How to check file input size with jQuery?

it has still a bug that i don't understand when it finds a non valid file it still sends the form even when it returns a false... if i find out why i will post here...

form file validation extension and size jquery or jscript

2 Answers2