Question

我正在尝试使用ajax和FormData Object上传多张图片。我遇到的问题是脚本只上传了1张图片而对其他图片没有任何作用。

此脚本仅用于chrome

这是脚本JS：

(function () {
    var count = 0;

    function showUploadedItem(source,index) {
        var list = $("#image-list");
        list.append("<li><img class='" + count + "' src=''></li>");
        $("." + count + "").attr("src",source);
        count++;
    }

    $('[type="file"]').change(function() {
        var file = this.files;

        $.each(file, function(i, filename) {
            reader = new FileReader();
            reader.onloadend = function (e) {
                showUploadedItem(e.target.result, filename.name);
            };

            reader.readAsDataURL(filename);
        });
    });

$('button').click(function() {      

    var files = $("[type='file']")[0].files;

    $.each(files, function(i, file) {

        var formdata = new FormData();
        formdata.append('images', file.name, file);

        console.log(formdata);

        $.ajax({
            url :"up.php",
            data:formdata,
            type:"POST",
            contentType: false,
            processData: false,
        });
    }); 
});
}());

在PHP中我有这个：

<?php 
    move_uploaded_file( $_FILES["images"]["tmp_name"], "img/" . $_FILES['images']['name']);
?>

我修改了一些代码，因为我发现了问题，但现在当我提交图像时，我遇到了PHP限制文件上传的问题，而且表单数据没有逐个上传文件。

EDIT2：我发现的解决方案是将每个循环放入click事件中，并在每个循环中放入ajax调用。

Answer 1

FormData采用单个文件而不是文件列表。在您的代码中file实际上是FileList，filename是文件

formdata.append("images[]", filename);

单击提交后，使用AJAX逐个上传多个图像

1 个答案: