带有附加数据的 jQuery 文件上传

2022-01-09 00:00:00 upload jquery php ajax

我正在使用 jQuery 使用附加数据进行 AJAX 上传.我正在关注的 Stackoverflow 代码 如何异步上传文件? 我使用的代码如下:

I am using jQuery to do AJAX uploading with additional data. The Stackoverflow code I am following it this one How can I upload files asynchronously? and the code I am using is the following:

var formData = new FormData($('form')[0]);
                $.ajax({
                    type: "POST",
                    url: "ajax/register.php",
                    dataType: "text",
                    data: {
                        name: $("#name").val(),
                        city: $("#city").val(),
                        image: formData
                    },
                    success: function(text) {
                        if(text == "data ok pic ok") { window.location = "reg3.php"; }
                        else { errorMessage(text); }
                    },
                    cache: false,
                    contentType: false,
                    processData: false
                });
            });

问题是，如果我把文件相关的代码去掉，比如

The problem is that, if I remove the file-related codes, such as

var formData = new FormData($('form')[0]);
image: formData
cache: false,
contentType: false,
processData: false

然后代码有效，我可以发送其他数据，例如名称"和城市".当我放回与文件相关的代码时，它停止工作，控制台中没有错误，服务器上的 PHP 脚本也没有任何操作(就像它没有收到其他相关数据一样)

then the code works and I can send other data, too like "name" and "city". When I put back in the file-related code, it stops working, no errors in the console and no action from the PHP script on the server (like it did not receive the other relevant data)

有什么想法吗?

提前致谢.

推荐答案

在编写表单发送文件时，指定 POST 方法和 multipart/form-data 编码.HTML代码中的每一个<input>都会被浏览器转换成HTTP请求体中的一个part，这样就可以同时发送多个文件和字符串.这里是 FormData 的文档(见最底部页).基本上你应该使用

When write a form to send a file, you specify the POST method and a multipart/form-data encoding. Each <input> in the HTML code will be converted by the browser in a part in the HTTP request body, so you can send at the same time multiple files and strings. Here is the documentation for FormData (see the very bottom of the page). Basically you should use

var data = new FormData($('form')[0]);
data.append("name",  $("#name").val());
data.append("city",  $("#city").val());

// ...

$.post({
  "ajax/register.php",
  data: data,
  processData: false,  // tell jQuery not to process the data
  contentType: false   // tell jQuery not to set contentType
});

FormData 对象旨在直接分配给 data 键.您将附加字段附加到 FormData 对象:它不代表二进制内容.相反，它是一个 名称-值对数据结构，其中的键总是字符串，值可以是字符串或二进制对象.

The FormData object is intended to be directly assigned to the data key. You append additional fields to the FormData object: it doesn't represent a binary content. Instead it's a name-value pair data structure, where the keys are always strings, ant the values can be string or binary objects.

相关文章