使用 jQuery 为 AJAX 提交收集文件上传数据答案

【问题标题】：Gathering file upload data for AJAX submit with jQuery使用 jQuery 为 AJAX 提交收集文件上传数据
【发布时间】：2015-11-20 14:55:08
【问题描述】：

我已经搜索了一些其他问题，但没有找到使用与我收集表单数据相同的方法的问题。

我正在通过 jQuery 从表单中收集值并将它们添加到 javascript 对象中，然后使用 jQuery 通过 AJAX 发布此信息。一切正常：

$("#contact-form-id").submit(function (e) {
    e.preventDefault();
   // validation stuff here
   // ...
   postForm(); // running the postForm() function if validation successful
});

function postForm(){
    var userName = $('input[name="user-name"]').val();
    var userEmail = $('input[name="user-email"]').val();
    var userPhone = $('input[name="user-phone"]').val();
    var userMessage = $('textarea[name="user-other-info"]').val();

    var valuesToPost = {
        userName: userName,
        userEmail: userEmail,
        userPhone: userPhone,
        userMessage: userMessage
    };

     $.ajax({
         type: "POST",
         url: "<?php echo get_stylesheet_directory_uri() ?>/actions/post-contact-form.php",
         data: {data : valuesToPost},
         cache: false,
         success: function(){
             // success!
         }
     });
};

如您所见，我使用preventDefault 来阻止表单提交，然后在将所有数据收集到我的对象valuesToPost 之前对其进行验证

但我目前忽略了最后一个字段，那就是文件上传字段。

我的理解是，上传文件时，它们会保存在临时目录中，直到脚本完成执行？我相信我可以在“另一边”（PHP 脚本）收集临时文件的位置路径。但我不知道如何从上传中收集文件值/输入，也不知道如何将其与我的对象一起发送valuesToPost

我想这就是我的想象：

var fileUpload = /* what goes here? how do I store the file upload in a variable in jQuery? */

        var valuesToPost = {
            userName: userName,
            userEmail: userEmail,
            userPhone: userPhone,
            userMessage: userMessage,
            fileUpload: fileUpload
        };

我完全错了吗？我希望我能够从文件上传中获取临时 URL 的路径，将其添加到我的对象中，然后在我的 PHP 脚本中下载文件（附加到电子邮件中）。

【问题讨论】：

标签： jquery ajax forms file-upload

【解决方案1】：

您可以使用它来存储提交的数据，包括上传的文件

var formData = new FormData($(this)[0]);

$(this) 指向提交的表单！

然后在ajax请求集中：

data: formData

希望它对你有用！

【讨论】：

我真的很讨厌看到$(this)[0]

【解决方案2】：

我无法发表评论以了解更多信息，但这听起来像是您正在尝试做的事情：

Passing input files ajax & jquery

后两个答案值得一提。

基本上，虽然您正在寻找的 var 是

var fileUpload = $('input[name="user-file"]')[0].files[0]);

希望对您有所帮助。

【讨论】：