layui上传文件最全版

layui上传文件最全版
前几天做一个文件上传功能，结合layui看了看文档总结出来一份给大家分享一下。你需要引入layui的ui包，这里就不在叙述了。

html：

        

            添加
        
        
		

        
    
前端代码：
我是触发downloadAdd点击添加的时候弹出的弹出层
layui.use(['form', 'upload', 'table','common', 'element', 'laypage'], function () {
  const $ = layui.jquery
  const table = layui.table
  const common = layui.common
  const layer = layui.layer
  const upload = layui.upload
  const form = layui.form
  const element = layui.element
  const laypage = layui.laypage
  $("#downloadAdd").click(function () {
        layer.open({
            type: 1,
            title: "上传文件",
            skin: 'layui-layer-rim',
            area: ['500px', '600px'],
            content: '
\n' +
                '    
\n' +
                '		
\n' +
                '			上传文件\n' +
                '			
\n' +
                '    				
\n' +
                '        				\n' +
                '        				
点击上传文件，或将文件拖拽到此处！
\n' +
                '    				
\n' +
                '			
\n' +
                '			\n' +
                '			
\n' +
                '    			
\n' +
                '    			
\n' +
                '			
\n' +
            	'		
\n' +
                '        
\n' +
                '            文件名称\n' +
                '            
\n' +
                '                \n' +
                
                '                \n' +
                '                \n' +
                '                \n' +
                
                '            
\n' +
                '        
\n' +
                '        
\n' +
                '            文件详情\n' +
                '            
\n' +
                '                \n' +
                '            
\n' +
                '        
\n' +

                '		
 \n' +
                '			文件类别 \n' +
                '			
 \n' +
                '  				 \n' +
                '    				选择类型 \n' +
                '    				EAST模型 \n' +
                '    				培训资料 \n' +
                '    				软件工具 \n' +
                '  				 \n' +
                '			
 \n' +
              	'		
 \n' +
                '        
\n' +
                '            保存\n' +       
                '		 
\n' +
                '    
\n' +
                '
'
        });
        //上传文件
        var uploadInst = upload.render({
            elem: '#uploadFile', //绑定元素
            url: layui.cache.host + '/download/upload', //上传接口
            method: 'POST',
            auto: true,  //是否直接提交，true直接提交，false指定按钮提交，和bindAction:''一起使用
            accept: 'file',
//             bindAction: '#commit',  //绑定提交按钮，这里没有绑定
            size: 0,
            multiple: false,
            before: function(obj) {
                layer.load();
            }, 
            done: function(data, index, upload) {//上传完毕回调
                layer.closeAll('loading');
                if (data.code === "0000") {
                	$("#fileName").show();
                	$("#fileName").val(data.data.fileName);
                	$("#urlAddress").val(data.data.urlAddress);  
                	$("#fileSize").val(data.data.fileSize);
                	$("#fileType").val(data.data.fileType);
                    layer.msg("上传成功！", {
                        icon: 6
                    });
                } else {
                    layer.msg("上传失败，请稍后重试！", {
                        icon: 5
                    });
                }
            }
            , error: function() {//请求异常回调
                layer.closeAll('loading');
                layer.msg('网络异常，请稍后重试！');
            }
        });
        form.render();
     });

  //添加提交
    layui.form.on('submit(add_download)', function (data) {
    	var fileName = $("#fileName").val();
        if(fileName == "" || fileName == null || fileName == undefined){
        	layer.msg("请上传附件！");
        	return false;
        }
        common.ajaxPost(layui.cache.host + '/download/save', data.field, function (res) {
        	layer.alert(JSON.stringify(res));
        	window.parent.location.reload();
        });
        layer.closeAll();
    });
 	
});
后端代码：
@PostMapping("upload")
	@ResponseBody
	public HcRes upload(@RequestParam("file") MultipartFile file, 
    		HttpServletRequest request, HttpServletResponse response){
		Map map = new HashMap();
		String filePath = null;
		long fileSize = 0;
		try {
			String fileName = file.getOriginalFilename();
			filePath = ExcelUtils.uploads(request, path);//调用上传方法
			fileSize = ExcelUtils.fileSize(request, filePath);//获取文件大小
			filePath = filePath.substring(filePath.lastIndexOf("/")+1);
			filePath = filePath.replace("\\", "/");
	//		downloadCenter.setUrlAddress(filePath); //保存数据库
			map.put("urlAddress", filePath);//路径用于保存数据库
		    double d = fileSize/1024/1024; file 单位转成兆保留两位小数
		    DecimalFormat df = new DecimalFormat("#.00");
		    String format = df.format(d);
		    if(".00".equals(format)){
	//	    	downloadCenter.setFileSize("0.01M");
		    	map.put("fileSize", "0.01M");
		    }else{
	//	    	downloadCenter.setFileSize(format);
		    	map.put("fileSize", format+"M");
		    }
		    
			String[] split = filePath.split("\\.");
	//		downloadCenter.setFileType("."+split[1]);
			map.put("fileType", "."+split[1]);
			map.put("fileName", fileName);
			return HcRes.builder().code(Const.SUCESS_RES).data(map).msg("").build(); //将名称路径类型返回给前端，根据也许需求
		} catch (Exception e) {
			e.printStackTrace();
			return HcRes.builder().code(e.getMessage()).msg(e.getMessage()).build();
		}
	}

上传方法：
public static String uploads(HttpServletRequest request, String uploadPath) throws Exception {
          String filePath = null;
          if (ServletFileUpload.isMultipartContent(request)) {
              uploadPath = uploadPath + File.separator;
              File file = new File(uploadPath);
              if (!file.isDirectory()) {
                  boolean result = file.mkdirs();
                  if (!result) {
                      throw new Exception("文件上传文件夹创建失败");
                  }
              }
              MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
              for (Iterator fileNames = multiRequest.getFileNames(); fileNames.hasNext(); ) {
                  MultipartFile multipartFile = multiRequest.getFile(fileNames.next());
                  if (multipartFile.isEmpty()) {
                      continue;
                  }
                  String fileName;
                  fileName = multipartFile.getOriginalFilename();
                  if(fileName.indexOf('\\') > 0){
                	  fileName = fileName.substring(fileName.lastIndexOf("\\")+1);
                  }
                  filePath = (uploadPath + uuid() + fileName);
                  multipartFile.transferTo(new File(filePath));
              }
          }
          return filePath;
      }
  计算文件大小：
  public static long fileSize(HttpServletRequest request, String uploadPath) throws Exception {
  		File file = new File(uploadPath);
        if (!file.exists() || !file.isFile()) {
            System.out.println("文件不存在");
            return -1;
        }
        return file.length();
  	}

根据业务需求进行相应的处理