Question

我一直在尝试使用每个图片的标题创建一个多文件上传器，而不使用任何第三方插件。我对此很陌生，我不完全理解我在这里做的事情。我从不同的来源采取了片段，我一直在调整它。到目前为止，我已经设法为每个放入droparea的图像显示一个表单，此表单包含图像标题的输入字段和上传按钮。单独地，这些新生成的表单中的每一个都成功地将图像和标题发送到我的php上传脚本。但是，当我添加一个上传全部按钮时，我能够发送的是没有字幕的图像数组。任何人都可以提供进一步处理的线索吗？我用Google搜索并尝试实施不同的方法，但我一直都在失败。目前，我并不关心浏览器兼容性，我只是想在Chrome和/或Firefox上使用它。

这是我的upload.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){

        //upload all images with captions

    });

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

我的上传模板文件是

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

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

我的upload.php文件只打印$_FILES和$_POST

数组

非常感谢

Answer 1

好的，我已经设法让它发挥作用，或者至少它是我希望它如何工作的。这是我的新修改。

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

}

我还改变了单按钮事件处理程序来调用上传函数，所以我没有必要重复编写XHR实例化。如果这不是正确的方法，那么我很乐意再接受任何想法。

jQuery：带有标题的多个文件上传

1 个答案: