多图片上传(文件上传)

注意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);//放在页面上
}