여러 파일 업로드에 자막을 입력하는 방법

Question

사진 앨범이 사진 앨범으로 나누어 져 있으며 각 사진 앨범에는 사진 수가 있습니다. 여러 파일을 업로드하는 데 문제가 없습니다. 사용자가 캡션을 입력하도록하는 기술은 제가 누락되었습니다.

나는 누군가가 나에게 그들이 옳다면 나에게 더 나은 것을 말해 줄 수있는 기술을 가지고있다.

1. 사진을 업로드 한 다음 하나씩 차례로 캡션을 입력하십시오.
2. 여러 파일 업로드 아이디어를 취소하고 하나씩 사진을 입력하도록하십시오.

Answer 1

난 당신이 내 대답 봉사 희망
좋아, 나는 작업, 또는 적어도 그것이 내가이 일을하고 싶었 방법은 얻을 관리했습니다. 여기에 새로운 수정이 있습니다. 여기

는

 $(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>