(文件上传二)SpringBoot+JQ文件上传

1、在做web项目的过程中，主要是写接口和wap、web或者是app工程师进行交互，我们交互的主要内容是数据的交互，说白一点，大致类似于字符串的交换。

2、个人中心或者后端管理功能难免会有一些个文件上传的功能，这里的话就不是简简单单的字符串交互的问题了。但是对于计算机来说，不管是什么，都是0或者1的二进制数据。

3、以图片上传为例我们结合SpringBoot和JQ进行文件上传。

bootDemo下载地址：https://pan.baidu.com/s/1bPNjjy1K0NbeyKgMKITDtg 密码：2j6n

主要代码如下：

html部分：

		<!DOCTYPE html>
		<html>
			<head>
				<meta charset="UTF-8">
				<title>jq文件上传</title>
			</head>
			<body>
				<div id="fileDiv">
					<input type="file" id="myFile" name="file"/>
					<button id="upLoadBtn">上传</button>
				</div>
			</body>
			<script type="text/javascript" src="jquery2.0.0.min.js" ></script>
			<script type="text/javascript" src="fileUpLoad.js"></script>
		</html>

JS部分：

			

			var imgUpLoadUrl = "/img/upload.do";
			
			$(function(){
				$("#upLoadBtn").click(function(){
					if(checkImg()){
						upLoadImg();
					}
				});
			})
			
			//校验函数
			function checkImg(){
				//获取file对象
				var file = $("#myFile").val();
				if(!/.(gif|jpg|jpeg|png|GIF|JPG|bmp)$/.test(file)){
					layer.msg("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种",{icon: 2,time: 2000});
					return false;
				}else{
					//大小校验
					if(($("#myFile")[0].files[0].size.toFixed(2))>=(500*1024)){
						layer.msg("请上传小于500KB的图片",{icon: 2,time: 2000})
					    return false;
					}
				}
				return true;
			}
			
			//上传函数
			function upLoadImg(){
				var imgEle = $("#myFile")[0].files[0];
				var formdata = new FormData();
				formdata.append('file',imgEle); 
				 $.ajax({
			    	 url:imgUpLoadUrl,
			    	 type:'post',
			         data:formdata,
			         cache: false,
			         processData: false,
			         contentType: false,
			         async: false
			     }).done(function(res) {
			    	 //自行处理
			     	console.log(res);
			     }).fail(function(res) {
			    	 //自行处理
			    	 console.log(res);
			     });;
			}

JAVA部分：


package com.file.upload.controller;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;

import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

@RestController
@RequestMapping("/img")
public class ImgUpLoadCon {
	
	@PostMapping("/upload.do")
	public String uploadImg(MultipartFile file) {
		InputStream in = null;
		FileOutputStream fos = null;
		
		//设置每次读取文件时的大小
		byte[] bytes = new byte[2048];
		try {
			//获取文件的输入流 , 该类有个方法是直接将文件持久化的 , 但是在windows在可能会出现路径过长的问题
			in = file.getInputStream();
			int len = 0;
			
			//文件持久化路径 , 就是上传之后存放该文件的地址
			String filePathStr = "D:/data/";
			
			//这里获取的是文件名 , 一般实际项目中都是自己生成文件路径记录到数据库中 , 但不是所有 ,此处不用
			String fileName = file.getOriginalFilename();
			
			//对路径常见 File 对象进行操作
			File filePath = new File(filePathStr);
			
			//创建路径
			if(!filePath.exists()) {
				filePath.mkdirs();
			}
			
			//获取输出流 , 格式自己做适配 根据MiME
			fos = new FileOutputStream(filePathStr+"test.jpg");
			
			//将读取到的内容写入到指定文件中
			while((len=in.read(bytes))!=-1) {
				fos.write(bytes, 0, len);
			}
			
			//flush 输出流
			fos.flush();
		} catch (IOException e) {
			e.printStackTrace();
		}finally {
				try {
					//关闭输出流
					if(null!=fos) {
					fos.close();
					}
					//关闭输入流
					if(null!=in) {
						in.close();
					}
				} catch (IOException e) {
					e.printStackTrace();
				}
		}
		//反回数据 , 这里可以反回自定义类型 , 这个略过
		return "{'code':'1','msg':'上传完成'}";
	}
	
}

SpringBoot+JQ上传完成。

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/qq1437715969/article/details/80369950
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2020-06-28 01:16:46
阅读 ( 870 )
分类：

(文件上传二)SpringBoot+JQ文件上传

(文件上传二)SpringBoot+JQ文件上传

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看