jQuery: многократная загрузка файла с титрами

Question

Я пытаюсь создать многопользовательский файл с заголовком для каждого изображения без использования стороннего плагина. Я довольно новичок в этом, и я не совсем понимаю, что я здесь делаю. Я взял фрагменты из разных источников, и я настраивал их. До сих пор мне удалось создать форму для каждого изображения, которое я занес в droparea, эта форма включает поле ввода для заголовка изображения и кнопку загрузки. Индивидуально каждая из этих вновь созданных форм успешно отправляет изображение и подпись на мой сценарий загрузки php. Однако, когда я добавляю кнопку «Загрузить все», все, что я могу отправить, это массив изображений без титров. Может ли кто-нибудь дать понять, как двигаться дальше? Я googled вокруг и попытался реализовать различные подходы, но я продолжаю терпеть неудачу. На данный момент меня не интересует совместимость с браузером, я просто хочу сделать эту работу в Chrome и/или Firefox.

Вот мой upload.js файл

$(document).ready(function(){ 
    $.event.props.push('dataTransfer'); 
    var fileList = new Array(); 
    $("#droparea").bind('dragenter dragover', false).bind('drop', function(e){ 

     $.each(e.dataTransfer.files, function(index, file){ 
      fileList.push(file); 
      var fileReader = new FileReader(); 
      fileReader.readAsDataURL(file); 
      fileReader.onload = (function(e){ 

       var form = document.createElement('form'); 
       form.action = 'uploads'; 
       form.className = 'forms'; 

       var img = document.createElement('img'); 
       img.src = e.target.result; 
       img.width = 80; 

       var label = document.createElement('label'); 
       $(label).append('Image Caption'); 

       var input = document.createElement('input'); 
       input.type = "text"; 
       input.name = "title"; 
       input.value = ""; 

       var button = document.createElement('button'); 
       $(button).append('Upload'); 
       $(form).append(img);  
       $(form).append(input);    
       $(form).append(button);    

       $('#uploads').append(form); 
      }); 
     }); 

     e.preventDefault(); 
     e.stopPropagation(); 

    }); 

    $('#upload-all').on('click', function(e){ 

     //upload all images with captions 

    }); 

    $(document).on('submit', 'form', function(e){ 
     e.preventDefault(); 
     //var index what does this do? 
     var index = $(this).index(); 
     var formData = new FormData($(this)[0]); 
     formData.append('file', fileList[index]); 
     var xhr = new XMLHttpRequest(); 
     xhr.open('post', 'upload.php', true); 
     xhr.send(formData); 
    }); 
}); 

Мой файл шаблона загрузки является

<div id="droparea" class="droparea"> 
    Drop files here to upload 
</div> 
<div id="uploads"> 

</div> 
<button id="upload-all">Upload All</button> 

Мой upload.php файл просто печатает массив $_FILES и $_POST

Большое спасибо

Answer 1

Okay , У меня есть чтобы он работал, или, по крайней мере, так я хотел, чтобы он работал. Вот моя новая модификация.

$('#upload-all').on('click', function(e){ 
    e.preventDefault();  
    var formData = new FormData($(this)[0]);  
    $('form').each(function(i){ 
     var title = $(this).find('input').val(); 
     formData.append('file[]', fileList[i]); 
     formData.append('title[]', title); 
    }); 

    upload(formData); 
}); 

function upload(data) { 

    var xhr = new XMLHttpRequest(); 
    xhr.open('post', 'upload.php', true); 
    xhr.send(data); 

} 

Я также изменил один обработчик событий кнопки для вызова функции загрузки, так что я не должен повторить написание XHR экземпляра. Если это не правильный способ сделать это, я с удовольствием дам еще один шаг на любые идеи, брошенные на меня.