jquery FormData 上传文件到PHP 服务器

介绍

jQuery FormData 是一种创建对象序列化为表单数据，以及通过 AJAX 和其他方法对其进行传输的方法。

FormData的使用场景

文件上传、多图上传

FormData与Ajax

在以前的 ajax 上传中，我们需要使用 XMLHttpRequest 对象来手动构造一个合格的表单数据。但是在jQuery 1.6中，我们有了更轻松的方法来处理 ajax 请求。jQuery ajax()方法现在支持低级数据对象，如FormData。

FormData对象的初始化

我们可以通过以下方法构建一个 FormData 对象：

    var formData = new FormData();
    formData.append(name, value);

name是表单中的名称，value是传递给服务器请求处理程序的值。

append()方法将表单域中的内容添加到FormData对象中。如果该表单元素存在多个值，则可以指定第二个可选参数。如果省略掉这个参数，传入的是单个值。如果传递的到 append() 方法的值是以 File 或 Blob 对象开头的，这总是代表一个文件。这些运算符（+ - * / %）被重载用于 JavaScript 的 Blob 和 File 对象。

上传文件到服务器

让我们看看上传文件的完整 jQuery 代码：

$(document).ready(function() {
    $('#form1').submit(function() {
        var formData = new FormData(this);
        $.ajax({
            url: 'http://example.com/upload.php',
            type: 'POST',
            data: formData,
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            success: function (data) {
                alert(data);
            }
        });
        return false;
    });
});

formData包含了所有的表单域和值，并且我们使用 async，cache，contentType 和 processData 属性来明确告诉 jQuery 这是一个文件以及与服务器通信的方式。由于文件通常比常规表单数据大得多，因此它是具有时间限制的，因此您可以通过使用 async 它来避免锁定浏览器。

contentType 属性告诉服务器目前的数据不是默认的表单类型编码，要使用 multipart/form-data。processData:false是告诉 jQuery 不要处理数据，不要把它转换成字符串。如此，在传递 formData 对象时，对象会自动转换为一个 XMLHttpRequest 对象的适当类型的结果。

关于上传文件的 jQuery 代码，缺失任何一个属性或设置都可能导致 405 错误。