我如何在Ajax發布呼叫中發送不同類型的數據

Question

我有一個json對象，並且在相同的javascript中，我有兩個文件上傳對象來上傳文件。 當我嘗試執行此請求時，不會發送到控制器。 我已經嘗試過了

data: {"jsonString":jsonString, "fd":"fd", "fd1":"fd1"},

任何人都知道以其他方式將其實現為json對象和文件對象嗎？ 我只得到較早上傳的文件名，但是現在在這篇文章中，我想將其保存在特定的文件夾中。

編輯：這不是在表單提交中，我正在通過此json對象值更新div內容，因此，提交按鈕不在div或jsp窗體的對話框按鈕中，因此我從其調用一個Java腳本，並且我有json值以及要獲取的所有文件對象都想發送給控制器。

請參考我已經問過的同樣的問題， 我試圖進行ajax post調用，但請求不會發送給控制器

我的控制器邏輯不確定我剛剛嘗試過寫什么

  @RequestMapping(value = "/submitAllInfo", method = RequestMethod.POST)
@ResponseStatus(value = HttpStatus.OK)
public @ResponseBody ModelAndView insertAllStepDetails(@RequestParam CommonsMultipartFile[] fileUpload,@RequestParam CommonsMultipartFile[] Uploadfile1,@RequestParam("UserName") String UserName) throws Exception{
    System.out.println("in submit controller !!!");
    System.out.println("ffffff"+UserName);

    return new ModelAndView("success");

}

編輯：：：

我的js函數的所有div都采用一種形式：

<script type="text/javascript">
 function submitFormNew(){

alert("in final submission form");
 var UserName=$('#uname').val();
 alert(UserName);


var fileInput=document.getElementById("Uploadfile"); 
alert(fileInput);

var file=fileInput.files[0];
alert(file);
var formdata = new FormData();
formdata.append("fileUpload",file);

 var fileInput1=document.getElementById("Uploadfile1"); 

var file1=fileInput1.files[0];

formdata.append("Uploadfile1",file1); 

formdata.append("UserName",UserName);

$.ajax({
    url:contextPath +"/submitAllInfo",
    type: 'POST',
    data: formdata,
    async: false,
    success: function (data) {
        alert("in success");
       alert(data);
    },
      error: function (){
        alert("error has cocured");
     },
     cache: false

     });
     }
   </script>

Answer 1

用你的形式嘗試這樣的事情：

看到我在說什么？ 只需將表單吐到對話框中，從對話框移出時將數據添加到jsonObject中。 最后，您可以顯示此內容，然后允許用戶提交。

<form id="data" method="post" enctype="multipart/form-data">
    <div class='dialog'>
       <input type="text" name="foo" value="bar" />
    </div>
    <div class='dialog'>
       <input name="image" type="file" />
    </div>
    <div class='dialog'>
        <input name="frroo" type="file" />
        <button>Submit</button>
    </div>
</form>

$("form#data").submit(function(){
    var formData = new FormData($(this)[0]);
    colsole.log(formdata);
    $.ajax({
        url: window.location.pathname,
        type: 'POST',
        data: formData,
        async: false,
        success: function (data) {
            alert(data)
        },
        cache: false,
        contentType: false,
        processData: false
    });

    return false;
});

Answer 2

        <input type="file"  name="file1" id="file1"/>
        <input type="file"  name="file2" id="file2"/>



      <script type="text/javascript">

        var formdataAJX = new FormData();
        var fileUpload1 = $('#file1').val();
        if(fileUpload1 != undefined && fileUpload1 != null){

            formdataAJX.append("file1",fileUpload);
        }

        var fileUpload2 = $('#file2').val();
        if(fileUpload2 != undefined && fileUpload2 != null){

            formdataAJX.append("file2",fileUpload);
        }

        $.ajax({
        url:contextPath +"/submitAllInfo",
        type: 'POST',
        data: formdataAJX,
        async: false,
        success: function (data) {
           alert(data);
        },
        cache: false

        });

        </script>

並在Controller中將file1獲取為file1和file2然后可以在formData對象中附加其他參數，在我的示例中為formdataAJX

並且您應該使用formdata.append()方法添加表單參數，例如input ， select ， file等。