how to send multipart request in ajax?

Question

the given code i need to upload zip file so i need to send multi-part request from ajax to server. but server get request null value how to resolve this problem? is there any idea for send request to server?

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插件轻松实现。使用此插件，您可以轻松地通过ajax调用与表单一起发送额外的$_POST数据。

Answer 2

To do a multipart/formdata ajax request (with a file) you have to use a FormData object. You can manually add the fields to the object and then send that via ajax or you can construct it usinf a form element.

     ...
     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");
                 }
             },
             ...