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

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>