jQuery的文件上传与附加数据 [英] jQuery file upload with additional data

问题描述

我使用jQuery做AJAX额外的数据上传。在＃1 code我下面就这一个<一个href="http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery">How我可以上传文件异步使用jQuery 的和code我现在用的就是以下几点：？

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 with jQuery? 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
                });
            });

现在的问题是，如果我删除该文件相关的codeS，如

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

那么code的作品，我可以送其他数据，太像名和城市。当我在文件相关的code放回，它停止工作，在控制台中没有错误，并从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的编码。每个＆LT;输入＆GT; 在HTML code将由浏览器在部分转换在HTTP要求身体，这样你就可以发送在同一时间多个文件和字符串。 这里是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 目的是为了直接分配给数据键。您添加附加字段的 FORMDATA 对象：它不会再present二进制内容。相反，它是一个名称 - 值对数据结构 ，其中的键总是字符串，蚂蚁的值可以是字符串或二进制对象

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.

这篇关于jQuery的文件上传与附加数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！