前端：
引入js和css
<link rel="stylesheet" href="bootstarp/layui/css/layui.css" media="all">
<script src="bootstarp/layui/layui.js" charset="utf-8"></script>
按钮：
<button type="button" class="layui-btn layui-btn-primary" id="picList">
<i class="layui-icon"></i>选择文件
</button>
<button type="button" class="layui-btn" id="manyPicUpload">
<i class="layui-icon"></i>开始上传
</button>
js部分： 注：多问健上传实际上是在前端单文件循环上传
/*上传下载js*/
layui.use('upload',function() {
var $ = layui.jquery, upload = layui.upload;
//图片上传
upload.render({
elem : '#test2',
url : 'pic/upload',
multiple : false,
auto : false,
bindAction : '#1vnupload',
before : function(obj) {
//预读本地文件示例，不支持ie8
obj.preview(function(index,file, result) {
$('#1vNCompare').empty();
$('#1vNCompare').append('<div class="thumbnail text-overflow" style="text-align: center;">'
+ '<img src="' + result + '" />'
+ '<h3>'
+ "原始图片"
+ '</h3>'
+ '</div>');
});
},
done : function(res) {
//上传完毕
}
});
//多文件列表示例
var ListView = $('#uploadList'), uploadListIns = upload
.render({
elem : '#picList', //表示单击某按钮激发上传
url : 'pic/upload', //文件上传路径
accept : 'file', //文件上传格式默认为image
multiple : true,//是否多文件上传true是多文件
auto : false,//是否自动上传
bindAction : '#manyPicUpload',//点击上传和auto:fasle组合使用
data : { //其它需要传递的数据 支持下面这样动态传值
repname : function() {
var uploadName =""+ $("#uploadName").val();
var selectbank_1=""+$("#selectbank_1").text();
if(uploadName!==''){
return uploadName;
}
return selectbank_1;
}
},
choose : function(obj) { //选择上传的文件
var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
//设置总文件数量计算初始值
var j=0;
//读取本地文件
obj.preview(function(index,file, result) {
j++;
/* alert(j); */
var tr = $(['<tr id="upload-' + index + '">','<td>'
+ file.name
+ '</td>','<td>'+ (file.size / 1014).toFixed(1)
+ 'kb</td>',
'<td>等待上传</td>',
'<td>',
'<button class="layui-btn layui-btn-mini img-reload layui-hide">重传</button>',
'<button class="layui-btn layui-btn-mini layui-btn-danger img-delete">删除</button>',
'</td>',
'</tr>' ]
.join(''));
//单个重传
tr.find('.img-reload').on('click',
function() {
obj.upload(index,file);
});
//删除
tr.find('.img-delete').on('click',
function() {
delete files[index]; //删除对应的文件
tr.remove();
uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
});
ListView.append(tr);
});
//将文件总数j显现到页面
},
done : function(res, index, upload) {//上传后返回的结果
i++;
alert(i);
if (res.code == 0) { //上传成功
var tr = ListView.find('tr#upload-'+ index), tds = tr.children();
tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
tds.eq(3).html(''); //清空操作
return delete this.files[index]; //删除文件队列已经上传成功的文件
}
this.error(index, upload);
},
error : function(index, upload) {
var tr = ListView.find('tr#upload-'
+ index), tds = tr.children();
tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
tds.eq(3).find('.img-reload').removeClass('layui-hide'); //显示重传
}
});
});
说明：上传文件必须依赖‘uplaod’模块否则不能使用。
后端：
需要引用jar包：1.commons-upload.jar
2.commons-io.jar (主要是upload.jar要依赖此包）
需要在springMVC.xml中加入（否则不能接收到前端的参数）
<!-- 配置上传功能 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxInMemorySize">
<value>1638400</value>
</property>
</bean>
controller层： MultipartFile----用来接受上传的文件 repname--data中传的额外参数
@ResponseBody
@RequestMapping("upload")
public Map<String,Object> manyImageUpload(MultipartFile file,String repname) throws IOException{
System.out.println("---------upload------------");
//调用服务层来处理数据
System.out.println("name="+repname);
System.out.println("=="+file.getName());//文件名字
System.out.println("1="+file.getContentType());
System.out.println("2="+file.getOriginalFilename());
System.out.println("3="+file.getSize());
System.out.println("--"+file.getInputStream());
//返回结果
Map<String,Object> aMap=new HashMap<String, Object>();
aMap.put("code", 0);
return aMap;
}