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请求根本没有成功。我的意思是上传图片的中间过程中有一些错误。尝试在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错误日志将为您提供更多信息

Answer 2

在这里就如何使用Ajax上传多个文件从A到Z给出完整的答案，首先在视图中，您可以根据需要输入任意数量的文件输入，但是当然可以这样排列：

Pagination

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

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

但是此代码将像这样通过$('#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;
    }
}

现在，您可以使用CodeIgniter遍历此数组和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) } }，但是首先让我们使用新数组重新初始化do_upload，然后使用我们的配置加载并上载库并循环执行像这样通过它：

$_FILES

就是这样。

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

2 个答案: