解析ajaxFileUpload 异步上传文件简单使用

2020-05-24 21:44:17易采站长站整理

这里就简单介绍下ajaxFileUpload,jQuery插件AjaxFileUpload可以实现ajax文件上传。我们的项目采用的是jsp跟js分离的架构,所以代码如下。

首先是jsp部分:


<!-- <form method="post"> -->
<input type="file" name="n_file" id="fileToUpload" value="上传表格" />
<button id="upload1" class="btn btn-default">上传</button>
<!-- </form> -->

这里说下 为什么把form注释了,因为我的jsp中已经有了另外一个form 在调试过程中发现可能有冲突就把form注释了,事实证明ajaxFileUpload 不用form表单一样可以提交,下面就是js代码部分:


$(function(){
//点击打开文件选择器
$("#upload1").on('click', function() {
//选择文件之后执行上传

$.ajaxFileUpload({
url:'supplyDataReportUploadExcel', //url自己写
secureuri:false, //这个是啥没啥用
type:'post',
fileElementId:'fileToUpload',//file标签的id
dataType: 'json',//返回数据的类型
//data:{name:'logan'},//一同上传的数据
success: function (data, status) {
// alert(data);
// alert(data.msg);
// alert(data.success);
if(data.success){
alert("upload,success!!!");
window.location.href='supplyDataReport';
}else{
alert(data.msg);
window.location.href='supplyDataReport';
}

}/*,
error: function (data, status, e) {
alert(e);
}*/
});

});

});

本人js不好,只是会用这个js不能完全copy走,要结合项目结构的实际情况,不过大体参数干什么的注释都写了。一定注意type是post跟请求对应的Controller的方法的method=RequestMethod.POST 一致。注意dataType:’json’  ,一定注意json的大小写。

ps:这里要说一下我用的data.success做的判断跟后面的一个实体类AjaxJson有关系,注意!!!!!

对了 jsp中还需要引入 对应的js如下:


<script type="text/javascript">Core.js('./js/iface/upload');</script>
<script type="text/javascript" src="libs/jquery/ajaxfileupload.js"></script>

第一段引入的upload 就是上面js的内容,我们的引入js已经被封装好了,所以直接写那就行,具体结合实际情况 ,下面的要用到的jQuery插件AjaxFileUpload的js文件。

接下来是Controller方法如何相应:


@SuppressWarnings("resource")
@RequestMapping(value = "/supplyDataReportUploadExcel", method = RequestMethod.POST)
public @ResponseBody String supplyDataReportUploadExcel(HttpServletRequest request, HttpServletResponse response,MultipartFile n_file) throws Exception {