Question

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

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

$("#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脚本中下载该文件（附加到电子邮件中）。

Answer 1

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

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

$（this）指向提交的表单！

然后在ajax请求集中：

data: formData

希望它适合你！

Answer 2

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

Passing input files ajax & jquery

后两个答案值得一提。

基本上，你要找的是

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

希望有所帮助。

使用jQuery收集AJAX提交的文件上传数据

2 个答案: