Question

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

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

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

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>

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

1 个答案: