多图片上传(文件上传)

注意Servers配置中限制上传大小

第一步：

HTML页面引入layui 

<div class="layui-upload">
    <button type="button" class="layui-btn layui-btn-normal" id="testList">
        选择多文件        
    </button>
	<div class="layui-upload-list">
	    <table class="layui-table">
	        <thead>
	        <tr>
	            <th>文件名</th>
	            <th>大小</th>
	            <th>状态</th>
	            <th>操作</th>
	        </tr>
	        </thead>
	        <tbody id="demoList"></tbody>
	    </table>
	</div>
	<!-- <button type="button" class="layui-btn" id="testListAction">开始上传</button> -->
</div>

Ctrl+Shift+F格式化代码(会与输入法简体/繁体快捷键冲突)

第二步：

js中监控Upload

layui.use(['layer', 'form', 'laydate', 'upload' ], function(exports) {});

在监控中编写上传js代码

layui.use(['layer', 'form', 'laydate', 'upload' ], function(exports) {

var baseUpload = new Array();//声明集合存放多个文件 layui.form.on('submit(form-submit)', function(data) { var formObj = data.form; var formData= data.field; formData['stiList'] = baseUpload;//表单提交的时候，把文件也提交过去 $.post(formObj.action, formData, function(result) { if(result.msg == 'OK') { //上传成功 } else { layer.msg(result.msg);//上传失败 } }); return false; }); var url = "saveFile";//这里是上传接口 var demoListView = $('#demoList'),uploadListIns = layui.upload.render({ elem: '#testList' //指向容器选择器 ,url: url //服务端上传接口 ,exts : 'jpg|png|jpeg' //限制上传后缀 ,size : 0 //设置文件最大可允许上传的大小，单位 KB。不支持ie8/9 ,multiple: true //是否允许多文件上传 ,auto: false //是否选完文件后自动上传 如果设定 false，那么需要设置 bindAction //参数来指向一个其它按钮提交上传 ,bindAction: '#testListAction' ,choose: function(obj){ //选择文件后的回调函数 var files = this.files = obj.pushFile(); // 将每次选择的文件追加到文件队列 // 读取本地文件 obj.preview(function(index, file, result){//result为base64(已去除,前内容) 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-xs demo-reload layui-hide">重传</button>' ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>' ,'</td>' ,'</tr>'].join('')); var s = { name : file.name,//文件名称 url : "",//存放上传地址 picture : result //上传base64 }; baseUpload.push(s);//放入集合中 // 单个重传 tr.find('.demo-reload').on('click', function(){ obj.upload(index, file); }); // 删除 tr.find('.demo-delete').on('click', function(){ delete files[index]; // 删除对应的文件 baseUpload.splice(files[index],1);//删除集合中 tr.remove(); uploadListIns.config.elem.next()[0].value = ''; // 清空 input file 值， //以免删除后出现同名文件不可选 }); demoListView.append(tr); }); } ,done: function(res, index, upload){//成功后回调函数 if(res.msg == "OK"){ // 上传成功 var tr = demoListView.find('tr#upload-'+ index),tds = tr.children(); tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>'); tds.eq(3).html(''); // 清空操作 var filesrc = res.savePaths;//返回的地址 var filename = res.fileName;//返回的文件名 var s = {//键值对赋值 name : filename,//文件名 url : filesrc//地址路径 /* ,picture : base64 */ //存储base64 }; baseUpload.push(s);//放入集合中 return delete this.files[index]; // 删除文件队列已经上传成功的文件 } this.error(index, upload); } ,error: function(index, upload){ var tr = demoListView.find('tr#upload-'+ index),tds = tr.children(); tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>'); tds.eq(3).find('.demo-reload').removeClass('layui-hide'); // 显示重传 } });

}); 

第三步：

调用后台接口

spring-context.xml中引入bean

<!-- 上传文件配置 -->
<!-- 配置MultipartResolver 用于文件上传 使用spring的CommosMultipartResolver -->
<!--defaultEncoding：请求的编码格式必须和用户JSP的编码一致，以便正确读取表单中的内容。 
            uploadTempDir:文件上传过程中的临时目录，上传完成后，临时文件会自动删除 
            maxUploadSize:设置文件上传大小上限（单位为字节） -->
<bean id="multipartResolver" 
 class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="defaultEncoding" value="UTF-8" />
        <property name="maxUploadSize" value="102400000" />
</bean>

控制器编写接口:

@RequestMapping(value = "/saveFile3", method = RequestMethod.POST) public void saveFile3(MultipartFile file, Model model) throws IOException { String msg = "OK"; // 判断文件是否存在 if (file == null || StringUtils.isEmpty(file.getOriginalFilename()) || 0 == file.getSize()) { model.addAttribute("msg", "请上传文件！"); return; } // 获取文件名 String fileName = ""; String saveName = ""; // 判断文件夹是否存在， String uploadPath = ContextUtil.getRealPath() + uploadFilePath; File dir = new File(uploadPath); if (!dir.exists() || !dir.isDirectory()) { dir.mkdirs(); } if (file != null) { // 获取文件名 fileName = file.getOriginalFilename(); saveName = getSaveName(fileName); // 文件上传 File localFile = new File(uploadPath + "/" + saveName); file.transferTo(localFile); } // 结果 model.addAttribute("msg", msg); model.addAttribute("savePaths", saveName); model.addAttribute("fileName", fileName); }

本文实则为往数据库中添加base64

后台有实体类集合接受传输过来的baseUpload集合变量

for(Map<String,Object> map : 实体类.get方法){ 实体类 对象 = new 实体类(); 对象.set字段(String.valueOf(map.get("name"))); stiVo.setPicture(String.valueOf(map.get("picture"))); stiVo.setUrl(String.valueOf(map.get("url"))); Service.add();//调用service添加方法 }

插入数据库

第四步：

在HTML页面展示

<div class="layui-fluid" style="overflow: hidden;"> <div class="layui-form-item"> <label class="layui-form-label">附件</label> <div class="layui-input-block" id="fujian"> </div> </div> </div>

当后台调用展示方法时,js判断传递过来的这个实体类存放base64字段是否有值

if (data.listSti != null) {//数据库查询出实体类存放base64不为空时 $('#fujian').html(); var HTML = ""; $.each(data.listSti, function(i, item) {//循环放在变量中 var url = basePath + '/upload/' + item.url; var picture = item.picture;//base64 HTML += "<img class='layui-upload-img' src='"+picture+"' />&nbsp;&nbsp;";//直接利用浏览器自带base64即可 }); $('#fujian').append(HTML);//放在页面上 }