通过 Ajax 上传图片时出错

Question

我无法通过 ajax 上传多个文件。这是我的代码。

HTML 代码：-

   <input type="file" id="txtBusinessImage" class="form-control" name="txtBusinessImageName[]" multiple >

    <input type="hidden" id="selectBusinessHiddenID" name="selectBusinessHiddenID" value="<?php echo $viewCompanyResult->company_id; ?>">

    <input type="button" id="uploadBusinessImg" value="Upload" >

Ajax 代码：-

$("#uploadBusinessImg").on("click",function(e)
{
                var fd = new FormData();
                var file_data = $("#txtBusinessImage")[0].files; // for multiple files
                for(var i = 0;i<file_data.length;i++){
                    fd.append("file"+[i], file_data[i]);
                }
                var other_data = $("#selectBusinessHiddenID").serializeArray();
                $.each(other_data,function(key,input){
                    fd.append(input.name,input.value);
                });

                $.ajax({
                    url: '<?php echo site_url('Main_ctrl/upload_business_photo_do'); ?>',
                    data: fd,
                    enctype: 'multipart/form-data',
                    contentType: false,
                    processData: false,
                    type: 'POST', async : true,
                    success: function(data){
                        alert(data);
                    }
                });
});

当我通过 Ajax 调用 upload_business_photo_do() 函数时，它无法接收图像的名称 $_FILES['file']['name']

upload_business_photo_do()
{
     $business_hidden_id=$this->input->post('selectBusinessHiddenID');

        /*code for image*/
        $config['upload_path']='./upload_101/';
        $config['allowed_types']= 'jpg|png|jpeg';
        $config['max_width'] = '6000';
        $config['max_height'] = '4500';

        $this->load->library('upload',$config);
        for($i=0; $i<count($_FILES['file']['name']); $i++)
        {
            $_FILES['userfile']['name']= $_FILES['file']['name'][$i];
            $_FILES['userfile']['type']= $_FILES['file']['type'][$i];
            $_FILES['userfile']['tmp_name']= $_FILES['file']['tmp_name'][$i];
            $_FILES['userfile']['error']= $_FILES['file']['error'][$i];
            $_FILES['userfile']['size']= $_FILES['file']['size'][$i];

            if(! $this->upload->do_upload())
            {
                /*----set flash message*/
                echo "error";

            }
            else
            {
                echo "done";

            }

        }
}

Answer 1

试试这样用，简单好用

    $("#uploadBusinessImg").on("click",function(e)
    {

               var formData = new FormData($("#form_name")[0]);
                $.ajax({
                    url: '<?php echo site_url('Main_ctrl/upload_business_photo_do'); ?>',
                    processData: false,
                    contentType: false,
                    data: formData,
                    type: 'POST', async : true,
                    success: function(data){
                        alert(data);
                    }
                });
      });

在控制器中像这样使用

if($_FILES['txtBusinessImageName']) 
    {
        $file_ary =  $this->reArrayFiles($_FILES['txtBusinessImageName']);

        foreach ($file_ary as $file) 
        {
            print 'File Name: ' . $file['name'];
            print 'File Type: ' . $file['type'];
            print 'File Size: ' . $file['size'];
        }
     }

还可以使用此函数将文件数据转换为多个图像数据的数组

function reArrayFiles(&$file_post) {

    $file_ary = array();
    $file_count = count($file_post['name']);
    $file_keys = array_keys($file_post);

    for ($i=0; $i<$file_count; $i++) {
        foreach ($file_keys as $key) {
            $file_ary[$i][$key] = $file_post[$key][$i];
        }
    }

    return $file_ary;
}

它的工作完美，只是尝试使用它。您不需要使用 ajax 添加额外的文件代码。

Answer 2

使用表单标签和提交按钮进行文件上传。

<form method="post" enctype="multipart/form-data">
<input type="file" id="txtBusinessImage" class="form-control" name="txtBusinessImageName[]" multiple >
<input type="hidden" id="selectBusinessHiddenID" name="selectBusinessHiddenID" value="<?php echo $viewCompanyResult->company_id; ?>">
<input type="submit" id="uploadBusinessImg" value="Upload">
</form>

并从 ajax 调用中删除 enctype: 'multipart/form-data' 并尝试。

更改以下内容以获取文件：

var file_data = $('#txtBusinessImage').prop('files')[0];   
var fd = new FormData();                  
fd.append('file', file_data);