php - 如何通过AJAX或序列化表单发送Formdata

Question

我想知道这段代码中有什么问题导致无法发送多个输入文件的 $_POST 。

这里是 View :

      <?php form_open_multipart('Emails/inbox',array('id'=>'fileupload')?>
                    <div class="col-sm-10 r-message-left">

                        <div class="block col-xs-12">
                                <div id="files1" class="col-xs-12 files">
                                    <ul id="sortable" class="fileList">
                                    <span>Uploaded files</span>
                                    </ul>

                                <label class="button" for="images"> Upload</label>
                                <input type="file" id="images" name="files1" multiple="multiple" />

                                </div>
                                </div>

                                <table class="zebra-striped"><tbody class="files"></tbody></table>
                        <div class="col-xs-2">
                            <button type="submit" style="height: 35px;width: 78px;" name="send" id="uploadBtn" value="1" class="btn btn-success m-t-20"><i class="fa fa-envelope-o"></i> send</button>
                        </div>

                    </div>
                    <?php echo form_close(); ?>

以及我将其放在页脚中的脚本，其想法是在保存之前从多个输入文件中删除选定的文件或图像..它实际上并没有将其从队列中删除，因为我知道这是不可能的..我只是通过 script 发送我想要保存的文件，然后执行操作，然后将其发送到 Controller 进行保存..但是 formData 不发送任何东西!!

<script>
$.fn.fileUploader = function(filesToUpload, sectionIdentifier) {
  var fileIdCounter = 0;

  this.closest(".files").change(function(evt) {
    var output = [];

    for (var i = 0; i < evt.target.files.length; i++) {
      fileIdCounter++;
      var file = evt.target.files[i];
      var fileId = sectionIdentifier + fileIdCounter;

      filesToUpload.push({
        id: fileId,
        file: file
      });

      var removeLink = "<img src='" + URL.createObjectURL(file) + "' style='width:100%;'/><span class=\"removeFile closebtn\" style='cursor: pointer' data-fileid=\"" + fileId + "\"><h6>x</h6></span>";

      output.push('<li class="ui-state-default" data-order=0 data-id="' + file.lastModified + '">', removeLink, '</li> ');
    };

    $(this).children(".fileList")
      .append(output.join(""));

    //reset the input to null - nice little chrome bug!
    evt.target.value = null;
  });

  $(this).on("click", ".removeFile", function(e) {
    e.preventDefault();

    var fileId = $(this).parent().children("span").data("fileid");

    // loop through the files array and check if the name of that file matches FileName
    // and get the index of the match
    for (var i = 0; i < filesToUpload.length; ++i) {
      if (filesToUpload[i].id === fileId)
        filesToUpload.splice(i, 1);
    }

    $(this).parent().remove();
  });

  this.clear = function() {
    for (var i = 0; i < filesToUpload.length; ++i) {
      if (filesToUpload[i].id.indexOf(sectionIdentifier) >= 0)
        filesToUpload.splice(i, 1);
    }

    $(this).children(".fileList").empty();
  }

  return this;
};

(function() {
  var filesToUpload = [];

  var files1Uploader = $("#files1").fileUploader(filesToUpload, "files1");

  $("#uploadBtn").click(function(e) {
    //e.preventDefault();

    var formData = new FormData();
    for (var i = 0, len = filesToUpload.length; i < len; i++) {
      //alert(filesToUpload[i].file);
      formData.append("files", filesToUpload[i].file);
    }

    $.ajax({
      url: '<?php echo base_url() ?>Emails/inbox',
      data: formData,
      processData: false,
      contentType: false,
      type: "POST",
      success: function(data) {
        //alert(data)
        files1Uploader.clear();
      },
      error: function(data) {
        alert("ERROR - " + data.responseText);
      }
    });

  });
})()
</script>

我的 Controller

 public function inbox(){
    $this->load->model('email/Email');

    if($this->input->post('send') == 1){
        var_dump($_FILES,$_POST);die;
        $email_id = $this->Email->insert();
      }
     }

我应该看到名为files的post..但正如我什么也没说帮助。

Answer 1

要发送多个文件，它们要么必须具有不同的名称，要么名称应以 [] 结尾，以便 PHP 将它们放入数组中。所以尝试一下:

var formData = new FormData();
for (var i = 0, len = filesToUpload.length; i < len; i++) {
    //alert(filesToUpload[i].file);
    formData.append("files[]", filesToUpload[i].file);
}

文件输入不会放入 $_POST 中，而是仅放入 $_FILES 中。