javascript - 使用 ajax 在 codeigniter 中使用单个输入上传多个图像时出现问题

Question

这个问题已经有答案了:

Multiple file upload in each inputs using CodeIgniter and Ajax (2 个回答)

已关闭 4 年前。

我正在尝试使用 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 });
            }
        }
    });
});

我的 Controller 代码:

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