如何为多个文件上传输入字幕

Question

我有一个照片库，它被分成相册，每个相册都有多张照片。我没有问题上传多个文件，我缺少的是让用户输入标题的技巧。

我有一些技巧，我希望有人帮助我选择他们中的一个，如果他们是对的，或者如果有更好的人告诉我这件事。

1. 上传图片，然后让他们逐个输入标题。
2. 只需取消上传多个文件并让他们逐个输入照片的想法。

Answer 1

我希望你成为我的回答，
好吧，我已经成功地得到它的工作，或者至少这是我怎么想它的工作。这是我的新修改。

这是我uploading.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){ 
      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); 

} 

     $(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); 
     }); 
    }); 

我上传模板文件是.html

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

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