按钮不通过表单 使用 ajax上传文件

近期在做一个文件上传xia下载功能,因为不适合使用通过表单方式提交后台,只是通过如下方式按钮上传文件到后台并且需要传参数

主要是可以不通过提交表单,而是通过按钮触发ajax把文件内容和参数传递到后台

当然大部分情况下我们都是可以通过form表单形式提交到后台,这个当然要简单多了,

主要我这个情景不适合使用form表单形式,特写出来做一记录

功能大概就是如上点击按钮上传文件

直接上代码

JSP代码

<th> 							
	<input id="file" name="file" type="file" style="width:300px;height: 25px">
	<input id="btnSubmit" class="btn btn-primary" type="button" value="浏览"  onclick="uploadFile('${loanCollection.loanId}')"/>&nbsp;
	<input id="btnSubmit" class="btn btn-primary" type="button" value="下载"  onclick="upload(4,'${loanCollection.loanId}')" />&nbsp;
			   </th>

JS代码

function uploadFile(loanId) {
            var myform = new FormData();
            myform.append('file', $("#file")[0].files[0]);
            myform.append('loanId',loanId);
            $.ajax({
                url: ctx+"/loanafter/loancollection/insuranceCompensatory/upload",
                type: "POST",
                data: myform,
                async: false,
                contentType: false,
                processData: false,
                success: function (result) {
                    if (result && result.result) {
                        getFileListPage();
                    } else {
                        $.messager.alert("警告", "文件上传失败！", "warning", function () {
                            var file = document.getElementById('file');
                            file.value = '';
                        });
                    }
                },
                error: function (data) {
                    $.messager.alert("警告", "文件上传失败！", "warning", function () {
                        var file = document.getElementById('file');
                        file.value = '';
                    });
                }
            });
        }