springboot-ajax上传文件

第一步配置

配置所需要的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;
    }

 

你可以使用Apache POI库来读取Excel文件,Spring Boot来处理HTTP请求和响应,和AJAX来发送异步请求从前端上传Excel文件。以下是一个基本的实现步骤: 1.添加Apache POI库的依赖到你的pom.xml文件中: ``` <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi</artifactId> <version>4.1.2</version> </dependency> ``` 2.创建一个`@RestController`类来处理HTTP请求和响应: ``` @RestController public class ExcelController { @PostMapping("/upload") public String uploadFile(@RequestParam("file") MultipartFile file) { // 处理上传的Excel文件 return "File uploaded successfully!"; } } ``` 3.在前端使用AJAX来发送异步请求上传Excel文件: ``` $(document).ready(function() { $('#uploadForm').submit(function(event) { event.preventDefault(); uploadFile(); }); function uploadFile() { var formData = new FormData(); formData.append('file', $('#file')[0].files[0]); $.ajax({ url: '/upload', type: 'POST', data: formData, processData: false, contentType: false, success: function(response) { alert(response); }, error: function(jqXHR, textStatus, errorThrown) { alert(textStatus + ': ' + errorThrown); } }); } }); ``` 4.在后端处理上传的Excel文件并返回数据: ``` @PostMapping("/upload") public ResponseEntity<List<String>> uploadFile(@RequestParam("file") MultipartFile file) throws IOException { List<String> data = new ArrayList<>(); Workbook workbook = new XSSFWorkbook(file.getInputStream()); Sheet sheet = workbook.getSheetAt(0); for (Row row : sheet) { for (Cell cell : row) { data.add(cell.toString()); } } workbook.close(); return ResponseEntity.ok(data); } ``` 这个例子中,我们读取Excel文件的第一个工作表的所有单元格的值,并将它们作为字符串添加到一个字符串列表中。最后,我们使用`ResponseEntity`来将数据作为JSON对象返回到前端。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值