layui是一款比较适合后端程序员直接上手得前端框架，页面css效果不错而且各类弹框、上传、日期、表格、图标、表单、标签等一系列组建都相当不错。开箱即用！这篇文章记录一下layui上传文件得组建分享一下：
首先撸一下前端代码:
<div class="layui-col-xs6"> <div class="grid-demo"> <form class="layui-form" onsubmit="return false;"> <div class="layui-form-item"> <fieldset class="layui-elem-field"> <legend>减免附件</legend> <div class="layui-field-box"> <div class="layui-upload"> <button class="layui-btn layui-btn-small layui-btn-radius layui-btn-blue" id="uploadFile">选择文件<span class="layui-badge layui-bg-gray"><i class="layui-icon"></i></span></button> <div class="layui-upload-list"> <table class="layui-table"> <thead> <tr> <th>文件名</th> <th>大小</th> <th>状态</th> <th>操作</th> </tr> </thead> <tbody id="imgList"></tbody> </table> </div> </div> </fieldset> </div> <div id="search" class="form-group ml30" style="text-align:center"> <button class="layui-btn layui-btn-small layui-btn-radius layui-btn-blue" id="upLoadFile">上传<span class="layui-badge layui-bg-gray"><i class="layui-icon">စ</i></span></button> </div> </form> </div> </div>
//附件上传 var imgListView = $('#imgList'); var files=null; var mutifile = null; var mutiobj = null; var fileSize = null; //上传图片文件 uploadListIns=upload.render({ elem: '#uploadFile' ,url:'${base}/urgeRepay/uploadFile'//请求url ,method:'post'//提交方式 ,data:{orderNo:orderNo} ,accept:'images'//指定文件类型为图片 ,exts:'jpg|png|gif|bmp|jpeg|doc|docx|gif|pdf' ,auto:false//手动上传 ,bindAction:'#upLoadFile'//上传按钮 ,choose: function(obj){//选择文件后的回调函数 //将每次选择的文件追加到文件队列 files = obj.pushFile(); mutiobj = obj; //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9) obj.preview(function(index, file, result){ fileSize = (file.size/1024).toFixed(1); mutifile = file; // console.log(index);//文件下标 // console.log(file);//上传文件 // console.log(result);//得到文件base64编码，比如图片 var tr = $(['<tr id="upload-'+ index +'">' ,'<td>'+ file.name +'</td>' ,'<td>'+ fileSize +'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 值，以免删除后出现同名文件不可选 }); imgListView.append(tr); }); } ,multiple:true//多文件上传 ie8,9不支持, ,size:10240 //KB ,number:3//一次最多3个图片 ,drag:true//支持拖拽 ie8,9不支持, ,done: function(res, index, upload){ fileName+=res.fileName+",";//文件名称 fileSeriName+=res.imgCode+",";//唯一标识 if(res.code == 0){ var tr = imgListView.find('tr#upload-'+ index); tds = tr.children(); tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>'); tds.eq(3).html(''); //清空操作 return delete files[index]; //删除文件队列已经上传成功的文件 } //上传成功 mutiobj.upload(index,file); } ,allDone: function(obj){ //当文件全部被提交后，才触发 console.log(obj.total); //得到总文件数 console.log(obj.successful); //请求成功的文件数 console.log(obj.aborted); //请求失败的文件数 } ,error:function(index,upload){ $('#upLoadFile').html("重新上传<span class=\'layui-badge layui-bg-gray\'><i class=\'layui-icon\'>စ</i></span>") } })
不要忘记引入layui得组件:var upload = layui.upload
后台:
//多文件上传
@RequestMapping(value="/uploadFile",method = RequestMethod.POST)
@ResponseBody
public Map<String,String> uploadImageFile(UploadFile uploadfile, HttpServletRequest request, HttpServletResponse response) throws Exception{
//获取上传的额外参数
String orderNo = request.getParameter("orderNo");
// TODO Auto-generated method stub
Map<String,String> resultMap = new HashMap<>();
FileOutputStream out=null;
//创建一个通用的多部分解析器
CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext());
//获取当前日期
String currDate = CommonUtil.getCurrentDate2();
//判断 request 是否有文件上传,即多部分请求
if(multipartResolver.isMultipart(request)){
//转换成多部分request
MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest)request;
//取得request中的所有文件名
Iterator<String> iter = multiRequest.getFileNames();
while(iter.hasNext()){
//取得上传文件
MultipartFile file = multiRequest.getFile(iter.next());
if(file != null){
//取得当前上传文件的文件名称
String myFileName = file.getOriginalFilename();
if(myFileName.lastIndexOf("\\")>0){
myFileName = myFileName.substring(myFileName.lastIndexOf("\\")+1);
}
//如果名称不为“”,说明该文件存在，否则说明该文件不存在
if(myFileName.trim() !=""){
log.info("文件名称:{}",myFileName);
//重命名上传后的文件名 按照年月日时分秒进行命名
String random = CommonUtil.getTimestampRandomNo(5) + Integer.toHexString(new Random().nextInt());
String fileName = random+ myFileName.substring(0,myFileName.lastIndexOf(".")) +"."+ myFileName.
substring(myFileName.lastIndexOf(".") + 1);
if(org.apache.commons.lang.StringUtils.isEmpty(uploadfile.getFileName())){
uploadfile.setFileName(fileName);
}
//定义上传路径
try {
String filePath=uploadPath+currDate+File.separator;//获取文件保存路径
uploadfile.setFilePath(currDate);
uploadfile.setSerialFilename(random);
uploadfile.setOrderNo(orderNo);
File fileDir=new File(filePath);
if (!fileDir.exists()) { //如果不存在 则创建
fileDir.mkdirs();
}
String realPath=filePath+fileName;
//存文件
File realFile = new File(realPath);
out = new FileOutputStream(realFile);
out.write(file.getBytes());
// file.transferTo(localFile);
resultMap.put("code","0");
resultMap.put("imgCode",random);//唯一标识
resultMap.put("fileName",fileName);//文件名称
entrustUserOrderDaoClient.saveImgFileInfo(uploadfile);
} catch (Exception e) {
log.error("上传文件异常:{}",e);
}finally {
out.close();
}
}
}
}
}
//将图片信息保存的入库
return resultMap;
这里要补充一下：一般文件上传最常用得是common-fileupload.jar 和 common-io.jar
这里用得spring-web集成得jar spring-web-4.3.8.Realese.jar.大同小异。
下面用得是common得jar包的上传文件后台代码，抄的。呵呵。供参考。都大同小异
@RequestMapping("/receive")public String receive(HttpServletRequest request,HttpServletResponse response) throws Exception {
// 判断enctype属性是否为multipart/form-data
boolean isMultipart = ServletFileUpload.isMultipartContent(request);
if (!isMultipart)
throw new IllegalArgumentException(
"上传内容不是有效的multipart/form-data类型.");
// Create a factory for disk-based file items
DiskFileItemFactory factory = new DiskFileItemFactory();
// Create a new file upload handler
ServletFileUpload upload = new ServletFileUpload(factory);
// Parse the request
List<?> items = upload.parseRequest(request);
Iterator iter = items.iterator();
while (iter.hasNext()) {
FileItem item = (FileItem) iter.next();
if (item.isFormField()) {
// 如果是普通表单字段
String name = item.getFieldName();
String value = item.getString();
// ...
} else {
// 如果是文件字段
String fieldName = item.getFieldName();
String fileName = item.getName();
String contentType = item.getContentType();
boolean isInMemory = item.isInMemory();
long sizeInBytes = item.getSize();
String filePath=STORE_FILE_DIR+fileName;
//写入文件到当前服务器磁盘
File uploadedFile = new File(filePath);
// File uploadedFile = new File("D:\haha.txt");
item.write(uploadedFile);
}
}
response.setCharacterEncoding("UTF-8");
response.getWriter().println("上传成功");
return null;
}
到此。这是我在项目中用到的文件上传的实际业务需求。另外一段代码就是我把照片传到我的服务器上。别人如果想法问怎么办？这个时候一般两种办法解决。一种直接把照片base64编码把照片文件传过去给对方。另一种就是上传到自己的服务器，给对方提供一个url地址，让其访问。
上传，包括上传图片路径。文件名称。等信息保存入库就不用写了。最后给对方提供一个接口地址。调用该地址可以访问自己服务器的图片。如果要考虑安全，可以发送一个key。服务端验证key.正确再给其访问！
@RequestMapping(value="/getImageFile/{fileSeriName}",method = RequestMethod.GET) public void getImageFile(@PathVariable String fileSeriName, HttpServletResponse response) throws Exception { HttpHeaders headers = new HttpHeaders(); headers.setContentType(MediaType.IMAGE_JPEG); UploadFile uploadFile = new UploadFile(); uploadFile.setSerialFilename(fileSeriName); List<UploadFile> list = messageListDaoClient.findUploadFileAll(uploadFile); if (list != null && list.size() > 0) { UploadFile file = list.get(0); BufferedImage image = ImageIO.read(new FileInputStream(uploadPath + file.getFilePath() + File.separator + file.getFileName())); // 将内存中的图片通过流动形式输出到客户端 ImageIO.write(image, "JPEG", response.getOutputStream()); } return; }
fileSeriName是文件的逻辑名称!