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){
    }

  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM