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插件，我试图避免使用第三方JS插件上传部分。

Answer 1

$_FILES是您检查上传文件而非$_POST的地方同样在您的代码中，您实际上将文件上传两次，就像您在实例化表单数据对象的表单中一样，然后使用append再次添加它。做任何一件事

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

或

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

Answer 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>

使用Ajax和Jquery上传文件

2 个答案: