form 表单上传文件，form两种提交方式，springmvc 文件上传 ResponseEntity附件下载

最新推荐文章于 2023-11-17 12:25:27 发布

灯盏菜

最新推荐文章于 2023-11-17 12:25:27 发布

阅读量597

点赞数

分类专栏：前端 java 后台Java js

本文链接：https://blog.csdn.net/fcvtb/article/details/81541463

版权

java 同时被 3 个专栏收录

35 篇文章 1 订阅

订阅专栏

后台Java

13 篇文章 0 订阅

订阅专栏

前端

6 篇文章 0 订阅

订阅专栏

前端 form 表单提交 ,

注意：form 表单上传文件 enctype="multipart/form-data" ， method="POST"

form 表单两种方式提交到后台两种路径

<body>

   <form class="layui-form layui-form-pane" action=""  name="form1"
                method="POST" enctype="multipart/form-data">
					
   <input type="hidden" id="fileRoute" name="fileRoute" value=""/>
    
	 <div class="layui-form-item">
	     <label class="layui-form-label">事项名称</label>
		    <div class="layui-input-block">
				<input type="text" name="sxmc" id="sxmc"  size="30"
					 placeholder="请输入事项名称"  class="layui-input">
			</div>
		</div>

		<div class="layui-inline">
		   <div class="inputFileWrapper">
			  <label for="inputFile">
				 <input type="file" id="inputFile" name="FILE" onchange="fileLimit(this);" />
					<span class="custorm-style">
						<span class="left-button">上传附件</span>
						<span class="right-text" id="rightText"></span>
					</span>
				</label> 
				<span class="right-button" onclick="clearInputFile()"
					id="del-btn" style="display: none">删除</span>
				</div>
			</div>
					
			<div class="layui-form-item layui-layout-admin" style="left: 0;text-align: center;background-color: #eee;">         
      
			<button class="layui-btn"  onclick="formSubmit()" >提交</button>
			<button class="layui-btn"  onclick="formSave()">保存</button>	                                 
			<a class="layui-btn layui-btn-primary" lay-event="close-btn">取 消</a>	                
	      </div> 
		  	  		       
        </form>
 

<script type="text/javascript">
		/*******************************************************
		 * 上传文件输入框 -样式 展示删除按钮
		 */ 
		 
		var fileBtn = $("input[type=file]");
		fileBtn.on("change", function(){    	
			
		    var index = $(this).val().lastIndexOf("\\");
		    var sFileName = $(this).val().substr((index+1));
		    
		    document.getElementById('del-btn').style.display='block';  //展示删除按钮
		    
		    $("#rightText").html(sFileName);
		    $("#fileRoute").val(sFileName);
		});
		/*******************************************************
		 * 
		 */ 

		function clearInputFile(){
			
			  $("#rightText").html("");
			  $("#fileRoute").val("");
			 
		      document.getElementById('del-btn').style.display='none';  //隐藏删除按钮
		} 
		/*******************************************************
		 * 上传文件限制大小和格式
		 */
		 
		function fileLimit(target) {
			
		 var fileSize = 0;         
		 if (!target.files) {     
		   var filePath = target.value;     
		   var fileSystem = new ActiveXObject("Scripting.FileSystemObject");        
		   var file = fileSystem.GetFile (filePath);     
		   fileSize = file.Size;    
		 } else {    
		  fileSize = target.files[0].size;     
		  }   
		  var size = fileSize / 1024;    
		  if(size>2000){  
			 
			   layer.alert("附件不能大于2M");
			  
		       target.value="";
		   
		   return
		  }
		  var name=target.value;
		  var fileName = name.substring(name.lastIndexOf(".")+1).toLowerCase();
		/*	   if(fileName !="xls" && fileName !="xlsx"){
		      layer.alert("请选择execl格式文件上传！");
		      target.value="";
		      return
		  }*/
		} 

 
 /************************* 两种方式提交 ******************************************/		
		function formSubmit(){
        			
        			var sxmc= $("#sxmc").val();
  
        			
        			if(""!=sxmc){
        				
        				form1.action='add.do';	
        				form1.submit();
        				} else{
        			       layer.alert("必填项不可以为空!");
        				 return ;
        				}       			       			
        		}
        
        		function formSave(){       			
    				form1.action='save.do';
    				form1.submit();    						
        		} 
</script>
</body>

springmvc controller层映射，（引用的包 import org.springframework.web.multipart.MultipartFile;）（具体的springMVC的配置这里就不写啦~~）

    @RequestMapping("/add.do") 
    public ModelAndView addw(MultipartFile FILE,HttpServletRequest request) throws Exception{
     
    	String FIL=request.getParameter("fileRoute");   //用于：判断上传文件路径，初始‘’ 代表没有选择文件上传
         
    	String file_path="";                    //上传生成路径MultipartFile inputFile,
        if(FILE != null && !("".equals(FIL)) ){        	
        	file_path=saveFile(FILE, "fj");   
        	logger.info("---上传附件路径-file_path:"+file_path);

        } 
  
    //插入数据库	... 
         
        return new ModelAndView();
    }

存储文件工具类

  /**
	 * <pre>
	 * 文件上传
	 * @param file ：文件
	 * @param folder_name ： 文件夹名称
	 * @return
	 * @throws IOException
	 * </pre>
	 */
	public String saveFile(MultipartFile file, String folder_name) throws IOException {
		
		String user_photo;
		//获取项目根目录下的绝对路径
		String root_path = request.getServletContext().getRealPath("res/uploadfile");
		
		/**
		 * 创建文件夹
		 * 判断文件夹是否存在，没有则创建
		 */
		File f = new File(root_path + "/" + folder_name);
		if(!f.exists()){
			f.mkdirs();
		}
		
		//获取UUID
		String uuid = UUID.randomUUID().toString().replace("-", "").toLowerCase();
		
		//获取文件类型(jpg,png...)
		String fileName = file.getOriginalFilename();
		String fileType = fileName.substring(fileName.lastIndexOf(".") + 1);
		
		//将文件写入文件夹中 （这里讲解一下如何读取文件 ）
		File files = new File(root_path + "/" + folder_name + "/" + uuid + "." + fileType); 
		FileUtils.copyInputStreamToFile(file.getInputStream(), files);
		
		//返回文件路径
		user_photo = "res/uploadfile/" + folder_name + "/" + uuid + "." + fileType;
		return user_photo;
	}

附件下载（import org.springframework.http.ResponseEntity;）

	/**  w附件文件下载    ,
		  * E:\workspace4\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\
		  *    bwsos\res\
		  *    uploadfile\fj
		 * @return
		 * @throws IOException
		 */
	    @RequestMapping(value="download", method=RequestMethod.GET)
	    public ResponseEntity<byte[]> update()  {
	    	
	    	String path="";	    		         
	    	String filenameString = request.getParameter("route");    //获取http参数
	    	
	      //获取项目根目录下的绝对路径
			String root_path = request.getServletContext().getRealPath("res/uploadfile");
				
			path=root_path+"\\fj\\"+filenameString;
	    		    	

	    	File downloadZip = new File(path);
	    		
	    	HttpHeaders headers = new HttpHeaders();
	    	headers.setContentDispositionFormData("attachment", downloadZip.getName());
	    	headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);
	    		
	    	ResponseEntity<byte[]> responseEntity = null;
	    
	    	try {
	    		responseEntity = new ResponseEntity<byte[]>(FileUtils.readFileToByteArray(downloadZip), headers, HttpStatus.OK);
	    	} catch (IOException e) {
	    		logger.error("Read zip file error: " + downloadZip.getPath());
	  
	    	}
	    		
	    	return responseEntity;
	    }