不能将元素追加到表单数据


Cant append elements to FormData

我遇到了一个问题,JavaScript无法将元素附加到我的FormData对象。这是我的代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Upload Files</title>
</head>
<body>
    <h1>File uploading</h1>
<div id="response"></div>
    <form action="index/upload" method="post" enctype="multipart/form-data" name="frmSave">
            <input class="fileUpload" type="file" name="files[]" multiple>          
    </form>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>

Javascript代码如下

$(document).ready(function(){
    $('.fileUpload').change(function(e){
       var formData = new FormData();
       var file = $(this)[0].files;
       formData.append('file', file);
       //console.log(formData); // it's empty!
       // show loading text
       $("#response").html("Uploading file... Please wait");
       // Do upload process, AJAX Post
       $.ajax({
         url: 'index/upload',
         type : "POST",
         data: formData,
         processData : false,
         contentType : false,
         success : function(res) {           
           $("#response").html(res);
           // Show the remove button
         }
       });   
    });

我正在尝试对我的网络服务器 ( PHP ) 进行 AJAX POST ,这很完美,但我不断收到异常消息,指出我的 FormData 对象中没有文件。

请帮忙。

谢谢!

更新:

看起来您无法在控制台,控制台.log(formData)中查看formData对象。开机自检工作正常。在PHP方面,我基本上只是循环_FILES美元。

感谢大家的投入。

var formObj = new FormData($('form')[0]); //try like this

我的示例工作示例,

var formObj = new FormData($('form')[0]);
        //formObj.append('test','CodingAnt');
        $.ajax({
          url: 'upload.php',
          data: formObj,
          processData: false,
          contentType: false,
          dataType:'json',
          type: 'POST',
          success: function(data){
            console.log(data.path);
            $('#image_uploaded').attr('src',data.path);
            $('#image_uploaded').show()
          }
        }); 

使用 Jquery serialize() 方法

<script>

// The Javascript
$(document).ready(function(){
    $('.fileUpload').change(function(e){
    // show loading text
        $("#response").html("Uploading file... Please wait");
    // Do upload process, AJAX Post
       $.ajax({
         url: 'index/upload',
         type : "POST",
         data: $('form').serialize(),
         processData : false,
         contentType : false,
         success : function(res) {           
           $("#response").html(res);
           // Show the remove button
         }
       });   
    });
</script>