Question

我正在使用html5和xhr进行多文件上传，因为你可以看到我在循环中发送请求这是一个坏的概念，但是当我在循环外发送文件并且只有最后一个文件被上传时，我无法上传文件。我哪里错了？

$('#uploadimg').on('click', function(e) {

    var files = document.getElementById('files').files;

    var formData = new FormData();
    for (var i = 0; i < files.length; i++) {
        formData.append('file', files[i]);

        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'http://localhost/ajaxuploader/upload/uploadimg');
        xhr.onload = function() {
            if (xhr.status === 200) {
                console.log('all done: ' + xhr.status);
            } else {
                console.log('Something went terribly wrong...');
            }
        };

        xhr.send(formData);

    }

    // now post a new XHR request
});

Codeigniter

public function uploadimg (){

    $config['upload_path'] = FCPATH . 'uploads/' ;
    $config['allowed_types'] = 'gif|jpg|png|jpeg|pdf|doc';

    $config['remove_spaces'] = 'TRUE';

    $this -> load -> library('upload', $config);
    //$this->upload->initialize($config);

    foreach ($_FILES as $k => $f) :
        $this -> upload -> do_upload($k);
    endforeach;
    //$this->index();
}

Answer 1

你似乎应该首先看看你的js for loop。 ID应该是唯一的，所以我会把这个方法排除在外。

我可能会循环每个输入字段，检查attr type == file，然后将其附加到formData对象。

var inpts    = document.getElementsByTagName('input');      

    for(var i=0; i < inpts.length; i++)
    {
       if(inpts[i].getAttribute('type') == 'file')
       {
           formData.append('myFiles[]', inpts[i].files[0]);
       }
    }

在服务器端，我会查看你的foreach循环，也许for循环就足够了。

for($i=0; $i < count($_FILES); $i++){
   $this->upload->initialize(); //new initialization for each file
   $this->upload->do_upload($_FILES[$i]);
   continue;
};

Answer 2

大家好我发现问题codeigniter工作正常，问题出在jquery上。这是引起问题的线。 “formData.append（files [i] .name，files [i]）;”感谢所有人为解决我的问题而努力工作

$('#uploadimg').on('click', function(e) {
            //console.log(files);
            //               files = document.getElementById('files').files;
            var formData = new FormData();
            $(files).each(function(i) {
                formData.append(files[i].name, files[i]);
            })
            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'http://localhost/ajaxuploader/upload/uploadimg');
            xhr.onload = function(data) {
                console.log(xhr.responseText);
            };

            xhr.send(formData);
        });

使用HTML5和XHR在codeigniter中进行多文件上传

2 个答案: