html代碼:
<form class="form-horizontal" enctype="multipart/form-data" method="post" id="abcdefg"> <input id="js-input-file1" name="file1" class="js-fileupload" type="file"> <input id="js-input-file2" name="file2" class="js-fileupload" type="file"> </form>
js代碼:
//樓主覺得原生input文件選擇框較丑,使用的樣式為jquery fileupload插件;選擇文件后將文件名顯示左側 //<input id="js-input-file1" name="text1" > //<input id="js-input-file1" name="file1" type="file"> //$('#js-input-file1').fileupload({ // replaceFileInput: false, //此處尤為重要,否則無法配合formData使用 // dd: function(e, data) { // var filename = data.files[0].name; // $('input[name="text1"]').val(filename); // }, //}); //通過jquery獲得form表單對象 var form = $("#abcdefg")[0]; var formData = new FormData(form); //formData可以添加額外參數 formData.append("extra", "123456"); $.ajax({ url: url, type: 'POST', data: formData, contentType: false, //禁止設置請求類型 processData: false, //禁止jquery對DAta數據的處理,默認會處理 success: function(data) { }, error: function (data) { } });
java代碼:
@RequestMapping(value = "/xxx", method = RequestMethod.POST) public ResponseEntity createLoadBalancer(@RequestParam("file1") MultipartFile file1, @RequestParam("file2") MultipartFile file2, String extra){ }