上傳文件+表單數據+ Spring MVC + JQuery

Question

我會盡量簡化這個問題。我想通過使用JQuery的AJAX提交上傳文件和附加表單數據（但是也爲了與ie 7或ie 8兼容，並且也是異步的）

沒有提交是通過JQuery提交的AJAX提交，這個過程工作正常。即我做了以下：

1. 聲明是CommonsMultipartResolver
2. 在控制器寫此處理方法

@RequestMapping（值= 「/ processfileupload」，方法= RequestMethod.POST） 公共字符串@ResponseBody handleFileUpload（UploadForm數據，BindingResult結果）拋出異常{

.... 

}

其中UploadForm是我綁定到表單的Spring MVC表單對象。另外，我在Spring的form標籤中綁定了formObject，如下所示：enctype =「multipart/form-data」..等等。

就像我說的，如果不是通過Ajax通過JQuery調用完成，一旦我嘗試使其成爲Ajax調用，該文件始終爲空。

這裏是通過JQuery Ajax調用

功能submitFileUploadViaAjax（）{

$.ajax({ 

     url: "processfileupload", 
     data: $("#file_upload_form").serialize(), 
     type: "POST", 
     processData: false, 
     contentType: false, 

     success: function(data) { 
       $(response).html(data); 
     }, 

     error: function (xhr, ajaxOptions, thrownError) { 
       if (xhr.readyState == 0 || xhr.status == 0) { 
        // not really an error 
        return; 
       } else { 
        alert("XHR Status = "+xhr.status); 
        alert("Thrown Error = "+thrownError); 
        alert("AjaxOptions = "+ajaxOptions) 
       } 
      } 

    }); 

}

我懷疑問題可能是：數據：$（ 「＃file_upload_form」）連載（），

我已經閱讀了一些建議的解決方案，爲那些有類似問題的用戶使用formData對象，但已經讀過，這將不會與IE 7或IE 8兼容，是 這是真的？我的頭也讀了JQuery文件上傳插件可以工作（https://github.com/blueimp/jQuery-File-Upload/wiki/How-to-submit-additional-form-data），但我不確定我是否能夠通過彈簧將表單數據綁定到表單對象的方式將它連接到Spring，然後將其注入控制器。

有沒有人有上傳文件（相對較小）+有一些表單數據的最佳方式的想法，並且能夠在彈簧mvc控制器中使用單個端點處理該文件？和解決方案，以便它與大多數瀏覽器兼容，但特別是將與ie 7或ie 8（它是一個要求它在這些瀏覽器中工作）。

感謝一堆！使用AJAX

• 羅科

Answer 1

文件上傳是不可能的。 AJAX實際上並不會將表單發佈到服務器，它會以POST或GET請求的形式將選定的數據發送到服務器。由於JavaScript無法從用戶機器抓取文件並將其發送到服務器，因此AJAX無法實現。你必須訴諸常規的舊形式提交。

請點擊此鏈接：http://viralpatel.net/blogs/ajax-style-file-uploading-using-hidden-iframe/ 爲例使用AJAX

Answer 2

文件上傳是可能的： 試試這個

客戶端：HTML

<input type="file" name="file" id="fileLoader" /> 
<input type="button" id="fileSubmit" value="Upload"/> 

客戶端：JS

var files = []; 
$(document) 
     .on(
       "change", 
       "#fileLoader", 
       function(event) { 
       files=event.target.files; 
       }) 

$(document) 
     .on(
       "click", 
       "#fileSubmit", 
       function() { 
       processUpload(); 
       }) 

function processUpload() 
      { 
       var oMyForm = new FormData(); 
       oMyForm.append("file", files[0]); 
      $ 
       .ajax({dataType : 'json', 
        url : "the url", 
        data : oMyForm, 
        type : "POST", 
        enctype: 'multipart/form-data', 
        processData: false, 
        contentType:false, 
        success : function(result) { 
         //...; 
        }, 
        error : function(result){ 
         //...; 
        } 
       }); 
      } 

服務器端：JAVA

@RequestMapping(method = RequestMethod.POST, value = "the url") 
    @ResponseBody 
    public void uploadFile(@RequestParam("file") MultipartFile multipartFile) { 
      //... 
    } 

Answer 3

要上傳的文件，使用FORMDATA：

function collectFormData(fields) { 
    var formData = new FormData(); 

    for (var i = 0; i < fields.length; i++) { 
     var $item = $(fields[i]); 

     if ($item.attr('type') =="file"){ 
      var file = $('input[type=file]')[0].files[0]; 
      formData.append($item.attr('name') , file); 

     } else { 
      formData.append($item.attr('name') , $item.val()); 
     } 
    } 
    return formData; 
} 

併發送：

var fields = form.find('input, textarea, select'); 
    var formData = collectFormData(fields); 


    $.ajax({ 
     url: form.attr('action'), 
     type: 'POST', 
     scriptCharset: "utf-8", 
     data: formData, 
     async: false, 
     cache: false, 
     contentType: false, 
     processData: false, 
     timeout: 600000, 
     success: function (response) { 
      if (response.status == "SUCCESS"){ 
       console.log("SUCCESS..."); 
       $(document).trigger("SUCCESS", [ response ]); 
      } else if (response.status == "FAIL"){ 
       console.log("FAIL..."); 
       clearErrors(form); 

       ... 
      } 
     } 
    }) 

Answer 4

這個工作就像一個魅力對我來說：

$('#formId').submit(function(evt) { 

      evt.preventDefault(); 

      var formData = new FormData(this); 

      $.ajax({ 
      type: 'POST', 
      url: "/url", 
      data:formData, 
      cache:false, 
      contentType: false, 
      processData: false, 
      success: function(data) { 
       alert('success'); 
      }, 
      error: function(data) { 
       alert('failed'); 
      } 
      }); 
     });