javascript - 如何使用 codeigniter 上传和移动文件 onclick 按钮 jquery？

Question

使用这段代码，我想将一个文件插入并移动到一个文件夹中，但是当我选择一个文件并上传时，它在我的控制台中显示一个错误:

Uncaught TypeError: Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'.

我该如何解决这个问题？请帮我。谢谢你

<input type="file" id="multiFiles" name="files" />
<button id="upload_file_multiple" class="btn btn-success add-btn update-btn">Upload</button>

$("#upload_file_multiple").click(function(event) {
  event.preventDefault();
  var form_data = new FormData($("#multiFiles"));
  var id = "<?php echo $this->uri->segment(3) ?>";
  jQuery.ajax({
    type: "POST",
    url: "<?php echo base_url() ?>syllabus/UploadFile/" + id,
    data: form_data,
    processData: false,
    contentType: false,
    success: function(response) {
      $('#afx_khjk').html(response);
    },
    error: function(response) {
      $('#afx_khjk').html(response);
    }
  });
});

public function UploadFile($id)
{
  if (isset($_FILES['files']) && !empty($_FILES['files'])) 
  {
    $rename = 'file_no-'.time().$_FILES["files"]["name"];       
    move_uploaded_file($_FILES["files"]["tmp_name"], 'uploads/syllabus/' . $rename);
    $data =  array(
      'pdf'=>$rename,
      'subjectID'=>$id,
      'unique_id'=>time()
    );
    $this->db->insert('sylabus_pdf',$data);
    $insert_id = $this->db->insert_id();
    echo 'File successfully uploaded : uploads/syllabus/' . $rename . ' ';
    $this->commondata($id);
  } 
  else 
  {
    echo 'Please choose at least one file';
  }
}

Answer 1

错误是因为 FormData 构造函数需要一个 FormElement 对象，而不是包含 input 的 jQuery 对象。

要解决此问题，请使用空构造函数创建 FormData 对象并使用 append() 添加您的文件:

var input = document.querySelector('#multiFiles');

var form_data = new FormData();
for (var i = 0; i < input.files.length; i++) {
  form_data.append('files[]', input.files[i]);  
}

或者，您可以通过向构造函数提供 form 来简化此过程。这样，所有表单控件中的数据都将自动为您包含在内。

var form_data = new FormData($('#yourForm')[0]);