如何在ajax中發送多部分請求？

Question

我需要上傳zip文件的給定代碼，所以我需要從ajax發送多部分請求到服務器。但服務器獲取請求空值如何解決這個問題？有什麼想法發送請求到服務器？

function importNow(serverURL, parameters) { 
     document.body.style.cursor = "wait"; 
     $.ajax({ 
      url: serverURL, 
      data: parameters, 
      processData: false, 
      contentType: false, 
      type: "POST", 
      cache: false, 
      dataType: "text", 
      success: function(data) { 
       if ($.trim(data) === "Success") { 
        updateStatusMessage("success", "Import scenario successfully"); 
       } else { 
        updateStatusMessage("failure", $.trim(data)); 
       } 
       document.body.style.cursor = "default"; 
      }, 
      async: false 
     }); 
    } 

    function importScenario() { 
     //window.location.href = clientURL + "/common/jsp/import.jsp"; 
     var serverURL = "http://localhost:8080/bwsim/UploadScenario"; 
     var parameters = "requestType=Import&subRequestType=importScenario&userName=" + userName ; 
     refButton = '<form id="importForm" class="userInputForm" enctype="multipart/form-data">' + 
     '<input id="file" name="file" type="file" />' + 
     '</form>'; 
     document.getElementById("popupDiv").innerHTML = refButton; 
     $("#popupDiv").dialog({ 
      title: "Import Scenario", 
      draggable: true, 
      bgiframe: true, 
      modal: true, 
      width: 500, 
      heigth: 100, 
      show: {effect: 'blind', duration: 500}, 
      hide: {effect: 'fade', duration: 1000}, 
      zIndex: 1000, 
      buttons: { 
       'Upload': function() { 
        if ($("#importForm").valid()) { 
         parameters; 
         importNow(serverURL, parameters); 
         $(this).dialog("close"); 
        } 
       }, 
       'Cancel': function() { 
        $(this).dialog("close"); 
       } 
      } 
     }); 
    } 

Answer 1

您可以輕鬆地jquery ajax form plugin acheive。隨着這個插件，你可以很容易地Ajax調用發送額外$_POST數據與表單一起。

Answer 2

要做一個multipart/formdata ajax請求（與一個文件），你必須使用FormData對象。您可以手動將這些字段添加到對象，然後通過ajax發送它，或者您可以使用表單元素構建它。

 ... 
    var serverURL = "http://localhost:8080/bwsim/UploadScenario"; 
    var refButton = '<form id="importForm" class="userInputForm" enctype="multipart/form-data">' + 
    '<input id="file" name="file" type="file" />' + 
    '<input value="Import" name="requestType" type="hidden" />' + 
    '<input value="importScenario" name="subRequestType" type="hidden" />' + 
    '<input value="'+userName +'" name="userName" type="hidden" />' + 
    '</form>'; 
    document.getElementById("popupDiv").innerHTML = refButton; 
    $("#popupDiv").dialog({ 
     title: "Import Scenario", 
     draggable: true, 
     bgiframe: true, 
     modal: true, 
     width: 500, 
     heigth: 100, 
     show: {effect: 'blind', duration: 500}, 
     hide: {effect: 'fade', duration: 1000}, 
     zIndex: 1000, 
     buttons: { 
      'Upload': function() { 
       if ($("#importForm").valid()) { 
        var parameters = new FormData($('#importForm')[0]); // formdata object constructed with form 
        importNow(serverURL, parameters); 
        $(this).dialog("close"); 
       } 
      }, 
      ...