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

我已经搜索了一些其他问题，但没有找到使用与我收集表单数据相同的方法。为AJAX收集文件上传数据使用jQuery提交

我通过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脚本中（以附加到电子邮件中）。

来源

2015-08-26 Francesca

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

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

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

然后在Ajax请求集：

data: formData

希望工程为您服务！

来源

2015-08-26 14:19:19

我真的很讨厌看到'$（this）[0]' – Musa

我不能发表评论，只是还没有找到更多，但是这听起来像你正在尝试做的事：

Passing input files ajax & jquery

第二两个答案都是不值一提。

从本质上讲，虽然你正在寻找的变种是

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

希望有所帮助。

来源

2015-08-26 14:22:18 Chris

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

回答

相关问题