javascript - 单击按钮提交多个表单，一个接着一个

Question

我有一个图片网站。我希望用户可以一次上传多个文件。我创建了一个图像上传脚本。

HTML

<div class="container">
    <h1>Image Uploader</h1>
    <input type="file" name="images[]" id="images" multiple>
    <br>
    <div id="images-to-upload" class="row">
    </div>
    <br>
    <div class="col-md-12">
        <button id="upload_button" class="btn btn-sm btn-success col-md-4 col-xs-12">Upload all images</button>
    </div>
</div>

JQuery

 <script>
    $(document).ready(function() {
        var fileCollection = new Array();
        $('#images').on('change', function(e) {
            var files = e.target.files;
            $.each(files, function(i, file) {
                fileCollection.push(file);
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function(e) {
                    var template = '<form class="upload_form col-md-6 col-xs-12" action="/upload">' +
                        '<img class="col-md-4 col-xs-4" src="' + e.target.result + '"> ' +
                        '<input style="width:90px; height:28px" class="col-md-2 col-xs-4"  type="number" name="table" id="table" >' +
                        '<input style="margin:0px 5px 0px 5px; width:95px" type="submit" class="btn btn-sm btn-primary col-md-3 col-xs-3 submit_form" value="Upload" name="submit_weight">' +
                        '<button type="button" class="btn btn-sm btn-danger remove_form col-md-2 col-xs-6">Cancel</button>' +
                        '<div style="height: 30px; font-size: 20px; margin: 0px 0px 10px 0px; padding: 0px; text-align: center;" class="progress col-md-7 col-xs-6 progress-stripped active"><div class="progress-bar" style="font-size: 15px; width:0%"></div></div> ' +
                        '</form>';

                    $('#images-to-upload').append(template);
                };
            });
        });

        $(document).on('submit', 'form', function(e) {
            e.preventDefault();
            $form = $(this);
            var index = $(this).index();
            var formdata = new FormData($(this)[0]);

            formdata.append('images', fileCollection[index]);
            var request = new XMLHttpRequest();

            request.upload.addEventListener('progress', function(e) {
                var percent = e.loaded / e.total * 100;
                $form.find('.progress-bar').width(percent + '%').html(percent + '%');

            });
            // progress complete load event
            request.addEventListener('load', function() {
                $form.find('.progress-bar').addClass('progress-bar-success').html('Upload Completed....');
            });

            request.open('post', 'script/file_upload_admin.php');
            request.send(formdata);

            $form.on('click', '.remove_form', function() {
                console.log("Cancel");
                alert("hello");
                $(this).hide();
            });
        });
    });

    $("#upload_button").on('click', function(event) {
        event.preventDefault();
        $(".submit_form").click();
    });
</script>

我的问题是，当用户一张一张地提交表单时，它就可以工作了。但是当用户单击“上传所有图像”时，表单数据会混合在一起，例如 1-表单数据的表输入值与另一个表单设置。

Answer 1

我认为没有必要发送多于一份表格。当您选择多个文件并提交时，请求将包含您选择的所有文件。

例如，在 PHP 中 $_FILES['myimagesinput'] 包含一个包含所有文件的数组。

同样的问题是here