使用 Ajax 和 Jquery 上传文件答案

【问题标题】：Upload files with Ajax and Jquery使用 Ajax 和 Jquery 上传文件
【发布时间】：2015-03-23 03:42:46
【问题描述】：

在过去的几个小时里，我一直在试图弄清楚如何通过 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 的“数据”字段为空。

我需要这个用于 Wordpress 插件，并且我试图避免在上传部分使用 3rd 方 JS 插件。

【问题讨论】：

标签： php jquery ajax upload

【解决方案1】：

$_FILES 是您检查上传文件的位置，而不是 $_POST。
同样在您的代码中，您实际上将文件上传两次，因为它是您实例化表单数据对象的表单，然后您再次使用追加添加它。做任何一个

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

或

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

【讨论】：

发布问题 3 分钟后，我想我可以尝试转储 $_FILES 并且它起作用了。不过，谢谢你的回答。我用这个stackoverflow.com/questions/21060247/…替换了我的代码，我希望它对某人有所帮助。

【解决方案2】：

<html>
<head>
<title>Ajax file upload</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function (e) {
$("#uploadimage").on('submit',(function(e) {
e.preventDefault();
$.ajax({
url: "ajax_php_file.php", // Url to which the request is send
type: "POST",             // Type of request to be send, called as method
data: new FormData(this), // Data sent to server, a set of key/value pairs (i.e. form fields and values)
contentType: false,       // The content type used when sending data to the server.
cache: false,             // To unable request pages to be cached
processData:false,        // To send DOMDocument or non processed data file it is set to false
success: function(data)   // A function to be called if request succeeds
{
alert(data);
}
});
}));

</script>
</head>
<body>
<div class="main">
<h1>Ajax Image Upload</h1><br/>
<hr>
<form id="uploadimage" action="" method="post" enctype="multipart/form-data">
<div id="image_preview"><img id="previewing" src="noimage.png" /></div>
<hr id="line">
<div id="selectImage">
<label>Select Your Image</label><br/>
<input type="file" name="file" id="file" required />
<input type="submit" value="Upload" class="submit" />
</div>
</form>
</div>
</body>
</html>

【讨论】：