Question

我有这样的UI：

我想在php中使用ajax上传多个视频。为此我在jQuery中尝试了FormData（）。但它只上传了一张图片，而不是更多。

我的表单文件：

<form enctype="multipart/form-data" action="/test.php" 
method="post" class="putImages">
   <input name="media[]" type="file" multiple/>
   <input class="button" type="submit" alt="Upload" value="Upload" />
    <button type="button" id="add"></button>
</form>

我的jQuery文件：

<script type="text/javascript">
    $(document).ready(function() {
        $("#add").click(function() {
            var $div = $('div[id^="inputdiv"]:last');
            var num = parseInt($div.prop("id").match(/\d+/g), 10) + 1;
            var $klon = $div.clone().prop('id', 'inputdiv' + num).appendTo("#athleteRegister").insertBefore("#submitbutton");
            $('#inputdiv' + num).find("input").attr('name', 'file[' + num + ']');
            $('#inputdiv' + num).find("input").val("");
            $('#inputdiv' + num).find("input").attr('id', 'file' + num);
            $('#inputdiv' + num).find("input").css("outline", "none");
            $('#inputdiv' + num).find("div.col-sm-1 i").attr('class', 'fa fa-minus');
            $('#inputdiv' + num).find("div.col-sm-1 button").attr('id', 'remove');
            $('#inputdiv' + num).find("img").attr('alt', 'remove');
        });
        $('#sub').click(function() {
            jQuery.each($('input[name^="media"]')[0].files, function(i, file) {
                data.append('file-' + i, file);
            });
            $.ajax({
                type: 'POST',
                data: data,
                url: "../admins/test",
                cache: false,
                contentType: false,
                processData: false,
                success: function(data) {
                    alert(data);
                }
            });
        });
    });
</script>

任何人都可以解决这个问题吗？谢谢！

Answer 1

对于ajax文件上传，我建议使用dropzone.js。它有很棒的文档和灵活性。

Answer 2

最后，我使用https://developer.mozilla.org/en-US/docs/Web/API/FormData/append

实施

$.each($("input[type=file]"), function (i, obj) {
    $.each(obj.files, function (j, file) {
        ajaxData.append('file[' + i + ']', file);
    })
});

如何在php中使用ajax上传多个图像

2 个答案: