複数のファイルをアップロードするためのキャプションの入力方法

Question

フォトギャラリーはフォトアルバムとして分割されており、各フォトアルバムには写真がいくつもあります。私は複数のファイルをアップロードしても問題はありませんが、私が見逃しているのは、ユーザーにキャプションを入力させるテクニックです。

私は、誰かが正しいかどうか、それとももっと良いことがあるかを誰かに教えてもらうことを願っています。

1. 画像をアップロードして、1つずつキャプションを入力させます。
2. 複数のファイルをアップロードするというアイデアをキャンセルし、写真を1つずつ入力するようにしてください。

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>