JQuery ajax 单按钮异步上传

Bertha 。 2022-05-29 20:18 181阅读 0赞

1.导入ajaxfileupload.js      前往https://download.csdn.net/download/duguxingfeng/10277768

<html>
    <body>        
            <input type="button" class="button green" value="上传" οnclick= "$('#fileupload').click()">
    	<input id="file_text" style="display: none">
    	<input type="file" id="fileupload" name="file" οnchange="def()" style="display:none">
    </body>
    </html>
    <script type="text/javascript">
    	function def(){
    		
    		$('#file_text').show();
    		$('#file_text').val($("#fileupload").val());
    		$.ajaxFileUpload({  
    			type:"POST",
    	                url : "fileUpload",  
    	                fileElementId : "fileupload",// 文件上传表单的id <input type="file" id="fileUpload" name="file" />  
    	                success : function(data){ // 服务器成功响应处理函数 
    	        	    alert("success");
    	                },  
    	                error : function(data){// 服务器响应失败处理函数  
    	        	    alert("error");
    	                }  
    	    });

}

</script>

2.java controller

@ResponseBody
    	@RequestMapping(value = "fileUpload", method = RequestMethod.POST, produces = "text/html;charset=UTF-8")
    	public String fileUpload(HttpServletRequest request, HttpServletResponse response)throws Exception {
    		
    		MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
    		MultipartFile file = multipartRequest.getFile("file");
    
    			if (file != null && file.getSize() > 0) {
    				try {
    					// 上传文件路径
    					String path = request.getServletContext().getRealPath("file");
    					// 上传文件名
    					String fileName = file.getOriginalFilename();
    					File filepath = new File("file", fileName);
    					// 判断路径是否存在，如果不存在就创建一个
    					if (!filepath.getParentFile().exists()) {
    						filepath.getParentFile().mkdirs();
    					}
    					file.transferTo(new File("file"+ File.separator + fileName));
    					
    				} catch (Exception e) {
    					e.printStackTrace();
    				}
    				
    			}else{
    				return "error";
    			}
    			return "ok";
    	}