java 多文件上传_完整的多文件上传实例(java版)

昨天刚刚做了一个文件列表上传,后端很简单,用

MultipartFile[] files

获取文件流数组,后端就当IO流操作就可以,似乎好像没啥好写的,但是!!!!!前端是真的糙单.要是自己写一个前端单个文件上传样式是丑了点,不过还是能用的,只是样式是真的丑了....无语了,所有有了这篇.首先来张完成的效果

下面就是实现步骤了,开始对比了Bootstrap fileinput 和jQeury的uploadfile,我使用的功能似乎单一且简单,所以并不需要哪些花狸狐哨的功能,所以选择了这个插件,首先还是感谢大佬,开源这么好的插件

DEMO地址: http://w.twinkling.cn/

官网地址: http://www.twinkling.cn/

我使用的是SpringBoot,上面的demo是基于基本的servlet写的,现在需要整合到我的项目中.

这个需要注意一点,插件需要写一个

/tk 请求,用于生层上传文件的唯一TOKEN,标识文件,其他的还需要一个配置类,基本配置文件,涉及到文件上传的一些配置,等下一起给出来

前端代码:

上传数据

body{

width: 90%;

padding: 10px;

margin-left: 5%;

}

#i_select_files{

width: 70%;

height: 5rem;

}

#i_stream_message_container{

position: absolute !important;

float: left !important;

}

#operate{

position: absolute;

width: 50%;

height: 100%;

}

#result{

position: absolute;

width: 50%;

height: 100%;

margin-left: 50%;

}

button{

background: transparent;

border: 1px #2a6496 solid;

width: 3rem;

margin-left: 2.8rem;

margin-top: 2rem;

border-radius: 5px;

background-color: #0099FF;

font-weight: bolder;

}

button:hover{

background-color: #4cae4c;

pointer-events: painted;

}

#i_select_files div{

margin-top: 1rem;

}

开始上传

停止上传

取消上传

重新上传

导入文件

结果信息:

$("#import").click(function () {

//询问框

layer.confirm('确定导入这个月最新上传的数据？', {

btn: ['确定','我在想想'] //按钮

}, function(){

//加载层

var index = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2

$.ajax({

type: "GET",

url: "/xlxs/setData",

success: function (data) {

if(data != null){

layer.close(index);

layer.alert('导入成功', {

skin: 'layui-layer-lan'

,closeBtn: 0

,anim: 4 //动画类型

});

}else{

layer.msg("导入失败,请重新导入!");

}

}

});

}, function(){

});

})

/**

* 配置文件(如果没有默认字样，说明默认值就是注释下的值)

* 但是，on*(onSelect， onMaxSizeExceed...)等函数的默认行为

* 是在ID为i_stream_message_container的页面元素中写日志

*/

var config = {

browseFileId : "i_select_files", /** 选择文件的ID, 默认: i_select_files */

browseFileBtn : "

请把xlxs文件拖到这里

", /** 显示选择文件的样式, 默认:

请选择文件

*/

dragAndDropArea: "i_select_files", /** 拖拽上传区域，Id(字符类型"i_select_files")或者DOM对象, 默认: `i_select_files` */

dragAndDropTips: "(文件夹)也是可以的", /** 拖拽提示, 默认: 把文件(文件夹)拖拽到这里 */

filesQueueId : "i_stream_files_queue", /** 文件上传容器的ID, 默认: i_stream_files_queue */

filesQueueHeight : 200, /** 文件上传容器的高度(px), 默认: 450 */

messagerId : "i_stream_message_container",