php - 使用 Ajax 和 Jquery 上传文件

Question

在过去的几个小时里，我一直在试图弄清楚如何通过 ajax 上传文件，但一无所获。

代码如下: HTML:

<form action="" method="post" id="uploadForm" enctype="multipart/form-data">

  <input type="file" name="image" id="image">
  <input type="submit">

</form>

JS:

<script>

jQuery(document).ready(function(){  
  jQuery('form#uploadForm').on('submit', function(e){
    e.preventDefault();

    var file = jQuery('#image')[0].files[0];
    var form_data = new FormData( jQuery("form#uploadForm")[0] );
    form_data.append( 'image', file );

    jQuery.ajax({
      url: 'index.php?a=do',
      type: 'POST',
      processData: false,
      contentType: false,
      cache: false,
      data: form_data,
      success: function(response) {
        console.log(response);
      },
    });

    return false;

  });
});

</script>

PHP:

<?php 
$a = isset($_GET['a']) ? $_GET['a'] : '';
if($a <> '') {
  echo "result - ";
  var_dump($_POST);
  die();
}
?>

结果我得到一个空数组，但是如果我将文件字段留空，那么我得到:

result - array(1) {
  ["image"]=>
  string(9) "undefined"
}

我尝试过serialize()、serializeObject()、serializeArray()、$.param，但每次我都会在控制台中收到“未定义函数”错误。

我在 stackoverflow 上遇到了几十个类似的问题，但没有任何帮助。我尝试执行 $.post 而不是 $.ajax，并且包含 form_data 的“data”字段为空。

我需要这个作为 WordPress 插件，并且我试图避免在上传部分使用第 3 方 JS 插件。

Answer 1

$_FILES 是您检查上传文件的位置，而不是 $_POST。
此外，在您的代码中，您实际上上传了两次文件，就像您实例化表单数据对象的表单一样，然后您通过追加再次添加它。 执行任一操作

var form_data = new FormData( jQuery("form#uploadForm")[0] );

或

var form_data = new FormData();
form_data.append( 'image', file );