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

问题描述

查看:

$("#submit").on('click',function(e){
    e.preventDefault();
    product_name = $("#product_name").val();
    category = $("#category").val();
    var formData = new FormData();
    $.each($("#product_image"), function (i, obj) {
        $.each(obj.files, function (j, file) {                    
            formData.append('product_image[' + i + ']', file);
        });
    });
    formData.append('product_name', product_name);
    formData.append('category', category);
    $.ajax({
        type:"POST",
        data:formData,
        processData: false,
        contentType: false,
        url:"<?php echo base_url(); ?>admin/products",
        success:function(data){
            alert(data);
        }
    });
});

控制器:

public function products()
{
    $dataInfo = array();
    $files = $_FILES;
    $cpt = count($_FILES['product_image']['name']);
    for($i=0; $i<$cpt; $i++)
    {           
        $_FILES['product_image']['name']= $files['product_image']['name'][$i];
        $_FILES['product_image']['type']= $files['product_image']['type'][$i];
        $_FILES['product_image']['tmp_name']= $files['product_image']['tmp_name'][$i];
        $_FILES['product_image']['error']= $files['product_image']['error'][$i];
        $_FILES['product_image']['size']= $files['product_image']['size'][$i];    

        $this->upload->initialize($this->set_upload_options());
        $this->upload->do_upload();
        $dataInfo[] = $this->upload->data();
    }

    $data = array(

            'product_name' => $this->input->post('product_name'),
            'category' => $this->input->post('category'),
            'product_image' => implode(",",array_column($dataInfo, 'product_image'))
        );
    $sql = $this->db->insert('add_product',$data);
    if($sql == true)
    {
        echo 'New Product Added';
    }
    else
    {
        echo 'Unable to Proceed!';
    }
}

private function set_upload_options()
{   
    $config = array();
    $config['upload_path'] = ''.base_url().'resource/product/';
    $config['allowed_types'] = 'gif|jpg|png';
    $config['max_size']      = '0';
    $config['overwrite']     = FALSE;
    return $config;
}

我有三个输入字段，即 product_name、category 和 product_image.现在，我想移动多个图像并插入以逗号(，)分隔的 product_image 名称，例如 img1.jpg,img2.jpg,img3.jpg 之类的.现在，当我警告响应时，它什么也没显示.那么，我该如何解决?请帮帮我.

I have three input field i.e. product_name,category and product_image. Now, I wants to move multiple images and insert product_image name which is separated by comma(,) for example img1.jpg,img2.jpg,img3.jpg like that. Now, when I alert reponse it show nothing. So, How can I solve ? Please help me.

类似mysql的预期输出演示

expected output demo of mysql like

product_name    category    product_images
============    ========    ==============
men t-shirt     MEN         img1.jp,img2.jpg,img3.jpg
kids t-shirt    kids        img1.jp,img2.jpg,img3.jpg

推荐答案

好了这里从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	mpphpF867.tmp"
            [1]=>
            string(24) "C:xampp	mpphpF878.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	mpphpF867.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	mpphpF878.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';
        }
    }
}

就是这样.

这篇关于在 CodeIgniter 中通过 jQuery AJAX 插入和移动多个图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！