0

html5とxhrを使用してマルチファイルのアップロードに取り組んでいます。ループ内でリクエストを送信していることがわかりますが、これは悪い概念ですが、ループ外に送信するとファイルをアップロードできず、最後のファイルのみが取得されます。 upoaded。どこが間違っているのですか？

$('#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();
}
4

2 に答える 2

0

最初に確認する必要があるのは、js for ループです。ID は一意である必要があるため、そのアプローチは除外します。

各入力フィールドをループして、属性タイプ == ファイルかどうかを確認し、それを 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;
};
于 2012-07-16T20:49:10.810 に答える
0

こんにちは、私は問題の 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);
        });
于 2012-07-18T08:32:52.760 に答える