springboot-ajax上传文件

最新推荐文章于 2025-07-11 11:10:24 发布

原创最新推荐文章于 2025-07-11 11:10:24 发布 · 5.8k 阅读

3 ·

CC 4.0 BY-SA版权

SpringBoot 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一种基于Java的文件上传解决方案，包括依赖配置、页面编写及后端处理流程。通过配置MultipartResolver来限制上传文件大小，并使用AJAX进行异步文件上传。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步配置

配置所需要的jar包

		<dependency>
			<groupId>commons-io</groupId>
			<artifactId>commons-io</artifactId>
			<version>2.5</version>
		</dependency>
		<dependency>
			<groupId>commons-fileupload</groupId>
			<artifactId>commons-fileupload</artifactId>
			<version>1.3.2</version>
		</dependency>
         <dependency>
          <groupId>com.gqhmt</groupId>
          <artifactId>gq-file-ops</artifactId>
          <version>0.0.4</version>
        </dependency>

配置设定文件大小

    @Bean
    public MultipartResolver multipartResolver(){
        CommonsMultipartResolver resolver = new CommonsMultipartResolver();
        resolver.setDefaultEncoding("UTF-8");
        resolver.setResolveLazily(true);//resolveLazily属性启用是为了推迟文件解析，以在在UploadAction中捕获文件大小异常
        resolver.setMaxUploadSize(10*1024*1024);
        resolver.setMaxInMemorySize(1);//文件太小不会创建临时文件需要加上
        return resolver;
    }

第二步：编写页面

	<input type="file" name="imageFile" id="imageFile" form="uploadFileFrm" value="imageFile" style="width: 300px; height: 38px;" >
	<input type="text" name="user_id" id="user_id_chip_image"   form="uploadFileFrm" hidden>
	<a  id="submitButton"onclick="uploadFileFun()">提交</a>	
	<form action="uploadFile" method="post"enctype="multipart/form-data" id="uploadFileFrm" name="uploadFileFrm">
    </form>
	<script type="text/javascript">
		function uploadFileFun(){
			var photo=document.getElementById("imageFile").value;
			if(""==photo){ 
				   alert("请选择上传图片");
				   return false;    
			}else  if (!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(photo)) {    
				 alert("图片类型必须是.gif,jpeg,jpg,png中的一种");      
				 return false;    
			}else{
			var form = new FormData(document.getElementById("uploadFileFrm"));
			$("#submitButton").hide();

				$.ajax({
					type: "POST",
					url: "<c:url value='/。。。/。。。。' />",
					data:form,// 序列化表单值
					processData:false,
					contentType:false,
					error: function(request) {
						alert("上传文件失败 ");
						window.location.reload();
					},
					success: function(data) {
						setTimeout(function(){
						 $("#submitButton").show();
						 $("#image1").append("<img src='"+data+"'  />");
						},3000); 
						}
				});
			}
		}
	</script>

第三步编写java类

Controller

 @RequestMapping(value = "/uploadFile", method = RequestMethod.POST)
 @ResponseBody
public ResponseEntity<?> addMerchantInfo(HttpServletRequest request,AuthorizedReqForm authorizedReqForm){
    	
        User user = null;
        MerchantInfoResForm resForm = new MerchantInfoResForm();
        MultipartHttpServletRequest MultipartRequest = (MultipartHttpServletRequest)request;
        MultipartFile file = null;
		try {
			user = this.getUserInfo(authorizedReqForm.getMerchantNo(), authorizedReqForm.getTokenId());//selectUserInfoFromReq(request);
			List<MultipartFile> files = MultipartRequest.getFiles("file");
			
			if (files.size() == 0) {
				throw new BusinessException(Errors.UPLOAD_IMG_NOT_EXISTS_ERROR);
			}
			for (int i =0; i< files.size(); i++) { 
		         file = files.get(i); 
		         if (!file.isEmpty()) { 
		            	userService.addMerchantInfo(file, user,resForm,i);
		        } else { 
		        	return ResponseEntityUtil.fail(Errors.USER_IDENTIFICATION_EMPTY_ERROR);
		        } 
	    	 } 
			
		} catch (BusinessException e) {
			return ResponseEntityUtil.fail(Errors.SYSTEM_NO_ACCESS);
	    } catch (Exception e) {
	    	return ResponseEntityUtil.fail(Errors.SYSTEM_ERROR);
	    }
       return  ResponseEntityUtil.success(resForm);
    }

Service

  @Override
    @Transactional
    public MerchantInfoResForm addMerchantInfo(MultipartFile file, User user, MerchantInfoResForm resForm,int i) throws Exception {
        // 图片上传
        CommonsMultipartFile cf = (CommonsMultipartFile) file;
        
        DiskFileItem fi = (DiskFileItem) cf.getFileItem();
        File file1 = fi.getStoreLocation();
        String path = file1.getPath();
        System.out.println(path);
        String fileUrl = fileService.uploadWithGroup(FileCopyUtils.copyToByteArray(file1),FastDfsGroup.PRI_FILE, "jpeg");
        // 插入图片
        systemFileService.insertFile(user.getId(), fileUrl, SysFileType.FILE_IMG, SysBusType.SUPPLEMENT_MERCHANT_IMG, user,i);
        resForm.getFileUrls().add(fileUrl);
        return resForm;
    }