直接进入正题,bootstrap fileinput的使用可以使文件上传时的界面更美观,想要一起传递的参数可以在初始化的时候通过uploadExtraData一起传递到后台。前边的初始化包括额外参数的传递实现还是比较方便,但是后端接收数据费了一段时间,特此记录一下,方便之后使用。
下面是初始化时候的代码:
$("#uploadfile").fileinput({//初始化uploadfile控件
language:'zh',
uploadUrl:'/IntelligentMirrors/apkUpload',//初始化url参数能否重新赋值
allowedFileExtensions:['txt'],
uploadAsync:true,//默认异步上传
showUpload:true,//是否显示上传按钮
showRemove:true,//显示移除按钮
showPreview:true,//是否显示预览
showCaption:false,
browseClass:"btn btn-primary",//按钮样式
dropZoneEnable:true,//是否显示拖拽区域
maxFileCount:1,//允许同时上传的最大文件数
enctype:'multipart/form-data',
validateInitialCount:true,
uploadExtraData:function(){//向后台传递参数
var data={
apkName:$("#apkName").val(),
versionNum:$("#versionNum").val(),
description:$("#description").val()
};
return data;
},
});
其中uploadExtraData的书写方式,由于要同时携带多个参数,所以参考了别人的博客,在此表示感谢,(没有记清楚博客地址,以后一定多加注意)。初始化过程中还需要注意的是enctype:'multipart/form-data'这个也是必须要有的。
后端除了文件之外还要接收apkName、versionNum、description三个参数,将他们存储到数据库中。
在后台处理的时候寻找这三个参数在哪儿费了挺大劲,可能也是自己个儿对整个过程的认识不太熟悉吧,于是我想到还是debug吧,好好找一下看看到底在什么地方,下边贴一下后端处理的代码吧:
MultipartResolver resolver = new CommonsMultipartResolver(request.getSession().getServletContext());
MultipartHttpServletRequest multipartRequest = resolver.resolveMultipart(request);
在这之前一直在request里边寻找这几个参数的踪迹,但是不知道为啥都没有发现,因此转换为MultipartHttpServletRequest 来接收bootstrap fileinput传递过来的文件信息,我在MultipartHttpServletRequest 处打了一个断点,开始debug,还是像之前一样开始先看它的对象multipartRequest里边是不是有什么好玩的东西。当我看到下边图片里的东西的时候高兴坏了,哈哈哈
从multipartRequest里边的multipartParameters里边我看到了我想要的参数,能看到size是4,这是因为里边还有一个file_id字段,剩下的就好说了,但还是有地方需要注意一下:
使用multipartRequest.getParameterMap()来获取那些参数信息,如下:
Map
返回值是Map
Map
Set
Iterator
List
while(iter.hasNext()){
Entry
String[] value = entry.getValue();
list.add(value[0].toString());
}
这样之后,参数就可以在获取以后正确的向后传递了。方法比较愚钝,主要是想要与大家分享一下这个过程,大家共同进步。向参考的博客表示感谢,以后一定注意列出链接,感谢大家,希望大家多批评指正,谢谢。