爲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提交

回答

相關問題