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...

Answer 1

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.