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

Question

查看：

$("#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 and product_image。现在，我想移动多个图像并插入以逗号（，）分隔的product_image 名称，例如img1.jpg,img2.jpg,img3.jpg 这样。现在，当我警告响应时，它什么也没显示。那么，我该如何解决？请帮帮我。

类似mysql的预期输出演示

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

Answer 1

好的，这里是关于如何使用 ajax 上传多个文件的从 A 到 Z 的完整答案，首先在视图中，您可以根据需要放置任意数量的文件输入，但当然是这样的数组：

<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 就这样，没有任何开销，只是一个正常的提交：

$('#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：

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)
        }
    }
}

这就是问题所在，所以我们必须像这样在控制器的方法中重新排列这个数组：

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

这会给你一个像这样的正确数组：

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，然后使用我们的配置加载上传库并像这样循环遍历它：

$_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';
        }
    }
}

就是这样。

Answer 2

也许您的 ajax 请求根本不成功。我的意思是在上传图像的中间过程中有一些错误。尝试在您的 ajax 声明中添加 error 选项。

$.ajax({
    type:"POST",
    data:formData,
    url:"<?php echo base_url(); ?>admin/products",
    success: function(response) { // <-- will called if http response is 200
        //console.log(response);
        alert(response);
    },
    error: function(response) {  // <-- will called if any error in server. http response: 400, 500, etc
        //console.error(response);
        alert(response);
    }

});

不要忘记启用您的 php 错误报告并检查 php 错误日志将为您提供更多信息