且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

通过CodeIgniter中的jQuery AJAX插入和移动多个图像

更新时间:2022-12-11 20:14:09

在这里从A到Z给出关于如何使用Ajax上传多个文件的完整答案,首先在视图中,您可以输入尽可能多的文件输入您想要的但作为这样的一系列数组:

Ok here a complete answer from A to Z of how to upload multiple files using ajax, first of all in the view, you can put as many file inputs as you want but as an array of course like this:

<form enctype="multipart/form-data" action="<?php echo base_url('') ?>" method="post">
    <input name="files[]" type="file" />
    <input name="files[]" type="file" />
    <input type="button" value="Upload" id="upload"/>
</form>

然后像这样的ajax,没有任何开销,只是正常的提交:

Then your ajax like this, no overhead whatsoever, just a normal submission:

$('#upload').click(function(e) {
    e.preventDefault();
    var formData = new FormData($(this).parents('form')[0]);
    $.ajax({
        url: "<?php echo base_url() ?>",
        type: "POST",
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {

        },
        error: function(response) {

        }
    });
});

但是此代码将像这样通过$_FILES:

But this code will pass $_FILES like this:

array(1) {
    ["files"]=>
    array(5) {
        ["name"]=>
        array(2) {
            [0]=>
            string(10) "imgOne.jpg"
            [1]=>
            string(31) "imgTwo.png"
        }
        ["type"]=>
        array(2) {
            [0]=>
            string(10) "image/jpeg"
            [1]=>
            string(9) "image/png"
        }
        ["tmp_name"]=>
        array(2) {
            [0]=>
            string(24) "C:\xampp\tmp\phpF867.tmp"
            [1]=>
            string(24) "C:\xampp\tmp\phpF878.tmp"
        }
        ["error"]=>
        array(2) {
            [0]=>
            int(0)
            [1]=>
            int(0)
        }
        ["size"]=>
        array(2) {
            [0]=>
            int(358419)
            [1]=>
            int(72657)
        }
    }
}

这就是问题所在,因此我们必须像这样在控制器的方法中重新排列此数组:

And that's the problem, so we have to rearrange this array in your controller's method like this:

$files = array();
foreach ($_FILES['files'] as $property => $array)
{
    foreach ($array as $key => $value)
    {
        $files[$key][$property] = $value;
    }
}

这将为您提供一个适当的数组,如下所示:

And this will give you a proper array like this:

array(2) {
    [0]=>
    array(5) {
        ["name"]=>
        string(10) "imgOne.jpg"
        ["type"]=>
        string(10) "image/jpeg"
        ["tmp_name"]=>
        string(24) "C:\xampp\tmp\phpF867.tmp"
        ["error"]=>
        int(0)
        ["size"]=>
        int(358419)
    }
    [1]=>
    array(5) {
        ["name"]=>
        string(31) "imgTwo.png"
        ["type"]=>
        string(9) "image/png"
        ["tmp_name"]=>
        string(24) "C:\xampp\tmp\phpF878.tmp"
        ["error"]=>
        int(0)
        ["size"]=>
        int(72657)
    }
}

现在,您可以使用CodeIgniter遍历该数组和do_upload,但是首先让我们使用新数组重新初始化$_FILES,然后使用我们的配置加载上载库并像这样循环遍历:

Now you can loop through this array and do_upload with CodeIgniter, but first lets reinitialize our $_FILES with the new array and then load upload library with our configs and loop through it like this:

$_FILES = $files;
$config['upload_path'] = FCPATH.'uploads/';
$config['allowed_types'] = 'gif|jpg|jpeg|png';
$config['max_size'] = '2048';
$this->load->library('upload', $config);
foreach ($_FILES as $fieldname => $fileobject)
{
    if (!empty($fileobject['name']))
    {
        $this->upload->initialize($config);
        if (!$this->upload->do_upload($fieldname))
        {
            $errors[$fileobject['name']] = $this->upload->display_errors();
        }
        else
        {
            $success[$fileobject['name']] = 'Success';
        }
    }
}

就是这样.