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

Posted 2023-02-24

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

【英文标题】：Insert and move multiple images via jQuery AJAX in CodeIgniter [duplicate]

【发布时间】：2019-05-28 22:34:15

【问题描述】：

查看：

$("#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

【问题讨论】：

我已经更新了我的代码，现在只有 product_name and category 值存储在数据库中，但图像没有插入，也没有移动到文件夹中

var_dump($dataInfo);的结果是什么？

它只插入product_name 和category 和product_image 不插入也不移动到文件夹中。

如果我打印 $cpt 它只计算 1 而我一次选择 3 张图像

你误会了，我想知道你的文件是否正确，所以我换个说法，var_dump($_FILES); 的结果是什么？

【参考方案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';
        
    

就是这样。

【参考方案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 错误日志将为您提供更多信息

【讨论】：

现在看@DharmaSaputra，只有product_images没有被插入并移动到文件夹和数据库中