LayUI文件上传案例

不念不忘少年蓝@ 2022-05-09 01:26 1028阅读 0赞

# 1、前端页面代码 #

<div class="layui-upload">
    	  <button type="button" class="layui-btn layui-btn-normal" id="selectFile">上传文件</button>
    	  <button type="button" class="layui-btn" id="startUploadFile">开始上传</button>
    	  <p id="allFileText"></p>
    	</div>
    <script type="text/javascript">
    layui.use('upload', function(){
    	  var $ = layui.jquery
    	  ,upload = layui.upload;
    
    	//上传文件
    	  upload.render({
    	    elem: '#selectFile'
    	    ,url: '${pageContext.request.contextPath}/bAndWListManage/batchAddWhiteList.do'
    	    ,accept: 'file'
    	    ,auto: false
    	    ,bindAction: '#startUploadFile'
    	    ,size: 1024*40 //限制文件大小，单位 KB
    	    ,done: function(result){
    	    	if(result.msg != true){
    	        	layer.msg(result.msg, {icon:1});
    	            }else if(result.msg == true){
    	            	layer.msg("上传成功!",{icon:1});
    	                }else{
    	                	layer.msg("上传失败!",{icon:1});
    	                    }
    	    }
    	  });
    	  
    	});
    </script>

# 2.后端java代码 #

@ResponseBody
    	@RequestMapping("batchAddWhiteList")
    	public String batchAddWhiteList(HttpServletRequest request){
    		ModelAndView mv = new ModelAndView();
    		mv.setView(Jackson2Util.jsonView());
    		CommonsMultipartResolver multipartResolver = 
            		new CommonsMultipartResolver(request.getSession().getServletContext());
    		//检查form中是否有enctype="multipart/form-data"
    		
    		JSONObject jsonObject = new JSONObject();
            if(multipartResolver.isMultipart(request))
            {
                //将request变成多request
                MultipartHttpServletRequest multiRequest = 
                		(MultipartHttpServletRequest)request;
                
                //获取multiRequest中所有的文件名
                Iterator iter = multiRequest.getFileNames();
                while(iter.hasNext()){
                    //一次遍历所有的文件
                    MultipartFile file = multiRequest.getFile(iter.next().toString());
                    
                    if(null!= file && file.getSize()>20*1024*1024) {
                    	
                    	jsonObject.put("msg", "传输文件过大，上传失败！");
                    }
                    else if(file!=null){
                    	String result = null;
    					try {
    						result = vehicleWhitelistService.batchImportVehicleWhitelistByXls(file);
    						if("yes".equals(result)) {
    							jsonObject.put("msg", true);	
    						}else {
    							jsonObject.put("msg", result);
    						}
    						
    					} catch (Exception e) {
    						jsonObject.put("msg", result);
    						logger.error(result);
    					}
    					
                    }
                }
            }
    		
    		return jsonObject.toString();
    	}

# 3.需要注意的地方 ： #

> 后端代码的返回值应该是json格式，否则会报错。----顾，应该在后端java代码的controller添加**@ResponseBody**注解

如图

![70][]

[70]: /images/20220509/d0df6fc6ff2e447dab6410b3363625ad.png