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

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。它有很棒的文档并且灵活性很好。