formData+ajax文件上传
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){ }