Question

我正在尝试使用带有Ajax的codeigniter中的单个输入来上传多个图像，这是我的代码。 HTML：

<input type="file" name="files[]" id="file" multiple />

AJAX：

$("#addItems").on("submit",function(even)
{
    even.preventDefault();
    $.ajax({
        url         : base_url+"dashboard/insert_item",
        type        : "POST",
        data        : new FormData(this),
        cache       : false,
        contentType : false,
        processData : false,
        success     : function(data)
        {
            data = JSON.parse(data);
            if(data.code == 201)
            {
                $.toaster({ title : 'Message', priority : 'success', message : data.record });
            }
            else
            {
                $.toaster({ title : 'Error', priority : 'danger', message : data.errors });
            }
        }
    });
});

我的控制器代码：

if ( !empty($_FILES) ) {
    $this->load->library('upload');

    //Configure upload.
    $this->upload->initialize(array(
        "allowed_types" => "gif|jpg|png|jpeg",
        "upload_path"   => "./uploads/"
    ));

    //Perform upload.
    if($this->upload->do_upload("files")) 
    {
        $uploaded = $this->upload->data();
        echo '<pre>';
        var_export($uploaded);
        echo '</pre>';
    }
    else
    {
        die('UPLOAD FAILED');
    } 
    // $response = makeResponse(201,'success','','Item Added Successfully!');
}

问题是我在新FormData中仅获得一张图像，我尝试了所有操作，但在FormData对象中仍获得了一张图像，而不是多张图像。如何获得新FormData对象中的所有图像值？有什么办法

Answer 1

您可以遍历文件并将其发送到服务器。

let files = [];
let inputFile = $('#file');
 inputFile.change(function() {
    let newFiles = []; 
    for(let index = 0; index < inputFile[0].files.length; index++) {
      let file = inputFile[0].files[index];
      newFiles.push(file);
      files.push(file);
    }



  console.log('files all files', files);


  var formData = new FormData();
                files.forEach(file => {
                  formData.append('attachment[]', file);
                });

  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" name="files[]" id="file" multiple />

在带有Ajax的codeiginiter中使用单个输入上传多个图像时出现问题

1 个答案: