Ajax form sending file one after another - html

Question

I have a form that I sending with ajax.
in this form there's x input file and each of them have 2 input text.
when i send the form all of the files are sent at the same times.
so what i want to do is sending one file at time with his 2 input text.
there's my code :
HTML
<div id="img_upload">
<form action="#" id="form" method="POST" enctype="multipart/form-data">
<div id="img_upload_head">
<?php
require MODULE.DS."galerie".DS."traitement".DS."galerie".DS."recup.php";
?>
<label for="nbImg">Selectionner le nombre d'image que vous voulez inserrer : </label>
<select name="nbImg">
<?php $nb = 10;
for ($i= 0; $i<=$nb; $i++){
?>
<option name="<?php echo $i;?>"><?php echo $i;?></option>
<?php
}
?>
</select>
</div>
<div id="img_upload_content">
<div id="content_head">
<div class="title_name">Selection fichier</div>
<div class="title_desc">Description</div>
<div class="title_price">Prix</div>
<div class="title_error">status</div>
</div>
<div id="content_list">
</div>
</div>
<div id="img_upload_foot">
<input type="submit" name="send" value="send" id="send" />
</div>
</form>
js
$(document).ready(function(){
$("select[name=nbImg]").hide();
$("#send").hide();
$("select[name=gal]").change(function(){
var galSelect = $(this).val();
if (galSelect != "none"){
$("select[name=nbImg]").fadeIn("fast");
$("select[name=nbImg]").change(function(){
var selfElem = $(this);
var nbImg = selfElem.val();
$("#content_list").empty();
for (var i = 1; i <= nbImg ; i++){
$("#content_list").append("<p id=\"file#"+i+"\"><span class=\"name\"><input type=\"file\" name=\"img[]\"id=\"img\" /></span><span class=\"desc\"><input type=\"text\" id=\"desc\" name=\"desc\" /></span><span class=\"price\"><input type=\"text\" id=\"price\" name=\"price\" /></span><span class=\"error\"></span></p>");
}
$("#send").fadeIn("fast");
$("#send").click(function(e){
e.preventDefault();
var form = $(this).parents("form");
var p = form.find("p");
var action = "/module/galerie/traitement/traitimg.php";
var desc = form.find("input[name=desc]").val();
var gal = $("select[name=gal]").val();
var price = form.find("input[name=price]").val();
var formData = new FormData();
jQuery.each($(p).find('input[name^="img"]')[0].files, function(i, file) {
formData.append('img-'+i, file);
formData.append('desc', desc);
formData.append('price', price);
formData.append('gal', gal);
jQuery.ajax({
url :action,
type : "POST",
processData: false,
contentType: false,
data: formData,
success: function(formData){
}
});
});
return false;
});
});
}else{$("select[name=nbImg]").fadeOut("fast");}
});
i don't really know if it's possible to do so.
Anyway thanks for the help you can provide me
EDIT
So i tried this
for (var i = 1; i <= nbImg; i++){
jQuery.each($(p).find('input[name^="img"]')[0].files, function(i, file) {
var formData = new FormData();
formData.append('img-'+i, file);
formData.append('desc', desc);
formData.append('price', price);
formData.append('gal', gal);
jQuery.ajax({
beforeSend : function(){
$(".error").empty().append("<img src=\"/media/design/img/loader.gif\"/>");
},
url :action,
type : "POST",
processData: false,
contentType: false,
data: formData,
success: function(formData){
$(".error").empty().append("<img src=\"/media/design/img/v.png\"/>");
}
});
});
}
It's sending all the file at the same time and when i remove the "for" loop it'll send just the first one
jQuery.each($(p).find('input[name^="img"]')[0].files, function(i, file) {
var formData = new FormData();
formData.append('img-'+i, file);
formData.append('desc', desc);
formData.append('price', price);
formData.append('gal', gal);
jQuery.ajax({
beforeSend : function(){
$(".error").empty().append("<img src=\"/media/design/img/loader.gif\"/>");
},
url :action,
type : "POST",
processData: false,
contentType: false,
data: formData,
success: function(formData){
$(".error").empty().append("<img src=\"/media/design/img/v.png\"/>");
}
});
});