Javascript/jQuery 附加到 FormData() 返回 'undefined'

Question

我正在尝试使用 jQuery 进行简单的文件上传。我的 HTML 中有一个文件输入，如下所示:

<form id="PhotoUploadForm" action="/some/correct/url" method="post" enctype="multipart/form-data">
            <input type="file" id="uploadPhoto" accept="image">
</form>

我还有一些 JavaScript/jQuery 绑定(bind)到输入的更改事件，如下所示:

   $('#uploadPhoto').on("change", function (event) {

        var fileData = this.files[0];
        var data = new FormData();
        data.append('image',fileData);
        data.append('content','What could go wrong');
        console.log(data.image, data.content); // this outputs 'undefined undefined' in the console

        $.ajax ({
            url: "/some/correct/url",
            type: 'POST',
            data: data,
            processData: false,
            beforeSend: function() {
               console.log('about to send');
            },
            success: function ( response ) {                   
                console.log( 'now do something!' )
            },
            error: function ( response ) {
                console.log("response failed");
            }
        });
    });

我注意到我遇到了 500 错误!很可能数据不正确，我知道 URL 是好的。所以我尝试将数据输出到控制台，我注意到我的数据附加了 return 'undefined'

console.log(data.image, data.content); // this outputs 'undefined undefined' in the console

当我使用 console.log(data) 时，我得到以下信息:

FormData {append: function}__proto__: FormData

我是不是做错了什么？为什么 data.image 和 data.content 未定义？当我输出 this.files[0] 时，我得到以下信息:

File {webkitRelativePath: "", lastModified: 1412680079000, lastModifiedDate: Tue Oct 07 2014 13:07:59 GMT+0200 (CEST), name: "2575-Web.jpg", type: "image/jpeg"…}lastModified: 1412680079000lastModifiedDate: Tue Oct 07 2014 13:07:59 GMT+0200 (CEST)name: "2575-Web.jpg"size: 138178type: "image/jpeg"webkitRelativePath: ""__proto__: File

所以问题不在于图像。我说得对吗？

Answer 1

问题

你误解了 FormData目的。 FormData对象只有一个 .append()方法，该方法不向其附加属性，但仅存储提供的数据。因此，显然，.image和 .content属性将是未定义的。

如果你想用 .image 创建一个对象和 .content属性，您应该创建一个常规对象，然后发送它。

解决方法

要实现你想要的，你有一些选择:

1. 使用 FormData :
   • 通过 <form> 调用其构造函数元素作为参数，它将为您完成所有工作。
   • 或者:创建对象然后使用 .append()方法。
2. 使用常规对象并发送。
3. 使用常规对象，将其转换为 JSON 并使用 contentType: 'application/json' 发送.

您会选择什么选项？它只取决于后端。如果您正在开发后端，请确保您正在从 POST 中检索数据。以正确的方式请求，否则请检查站点并查看您需要发送的数据类型。

选项1

创建 FormData对象:

• 方法一，让构造器为你工作:

  var form = document.getElementById("PhotoUploadForm"),
      myData = new FormData(form);
  

• 方法二，自己动手:

  var fileData = this.files[0],
      myData = new FormData();
  
  myData.append('image', fileData);
  

然后，稍后在您的代码中，您可以发送它:

$.ajax({
    url: "/some/correct/url",
    type: 'POST',
    data: myData, // here it is
    ...
});

选项 2

创建一个常规对象并发送:

var myData = {
        image: this.files[0]
    };

$.ajax({
    url: "/some/correct/url",
    type: 'POST',
    data: myData, // here it is
    ...
});

选项3

var myData = {
        image: this.files[0]
    };

myData = JSON.stringify(myData); // convert to JSON

$.ajax({
    url: "/some/correct/url",
    type: 'POST',
    contentType: 'application/json',
    data: myData, // here it is
    ...
});