使用 formData returns 未定义文件数组上传文件

Question

我从 print_r($_POST) 中得到未定义，它 post 在同一个 php 页面上。

Array ( [file] => undefined )

已编辑 - 添加了调用 upload_banner 函数的部分

HTML

<form enctype="multipart/form-data" id="banner_form" class="form-horizontal" role="form" action="">
  <input type="hidden" name="MAX_FILE_SIZE" value="2000000">
  <input id="file" name="file" type="file" class="filestyle" accept="image/jpeg,image/gif,image/png">
</form>

JS

$('#submit_btn').click(function(e){
    e.preventDefault();

    var date = document.getElementById('datepicker').value;
    var title = document.getElementById('title').value;
    var content = document.getElementsByClassName('note-editable')[0];

    if(date == "" || title == "") {
      alert("Please fill in the required fields");
      return false;
    }
    else {

        var cfm = confirm("Confirm Submit Changes?");
        if(cfm === true)
        {

          var editarea = content.innerHTML;

          $.post ("functions/add_upcoming.php",{date: date,title: title,sm_content: editarea},
            function(data) {
          });

          upload_banner();
        }
        else
        {
          return false;
        }
      }
  });




function upload_banner() {
    var form_data = new FormData($('#banner_form')[0]);
    form_data.append('file', $('input[type=file]')[0].files[0]);

      $.ajax({
        url: "upcomingevents.php?p=73",
        contentType: false,
        processData: false,
        dataType: 'json',
        data: form_data, 
        type: 'post',
        success: function(data) { },
        contentType: false,
        processData: false
    });
}

json 作为数据类型导致我从 php 端返回数组，没有 post 附加代码导致我已经在文件上传部分出现问题

PHP

if(isset($_POST['file'])) {
  print_r($_POST);
  exit();
}

我是不是做错了什么？

Answer 1

考虑到您没有处理程序的提交按钮运行，您的函数甚至没有被调用。它应该是这样的：

<form enctype="multipart/form-data" id="banner_form" class="form-horizontal" role="form" action="">
  <input type="hidden" name="MAX_FILE_SIZE" value="2000000">
  <input id="file" name="file" type="file" class="filestyle" accept="image/jpeg,image/gif,image/png">
  <input type="submit" id="submit_btn"/>
</form>

另外你的 JS 有语法错误，不需要第二组 }); 来关闭点击处理程序。

JSFiddle： https://jsfiddle.net/sggf82am/2/

Answer 2

FormData 设置不正确，应该是：

var form_data = new FormData( );
form_data.append('file', $('input[type=file]')[0].files[0]);

您确定 ajax 引用的 url 是正确的吗？

为什么有查询参数 (?p=73) 而不是 post =23=]得到.

最后，尝试通过

打印响应

success: function(data) { alert(JSON.stringify(data))},

使用 formData returns 未定义文件数组上传文件

file upload with formData returns undefined file array

javascript

php

jquery

form-data