JavaWeb图片上传的几种方式
一、图片上传介绍
JavaWeb方向编程过程中，实现图片上传有三种方式：
1、传统的基于springMVC的MultipartFile类实现图片上传。
2、基于Ajax的图片上传。
3、基于Base64压缩的图片上传。
二、springMVC图片上传（springboot通用）
此方法的优点是可以将图片和其他的表单元素一起提交到服务器，服务器接受到的图片其实已经存储于容器的临时文件中，进行文件拷贝工作比较简单。
缺点是无法及时看到图片上传的预览效果，图片一旦选择错误只能重新提交。
注：红色代码为关键代码。
1、页面代码
<form action="/upload" method="post" enctype="multipart/form-data"> 选择头像:<input type="file" name="file" accept="image/*" /> <br> 用户名字:<input type="text" name="userName"/> <br> <input type="submit" value="提交"> </form>
2、config.properties配置文件
创建名为config.properties的配置文件，并且再其中配置图片上传物理路径。注意window和linux的写法不同。
**此配置内容在springboot结构中的application.properties文件中配置**
file.location.path=d:/upload
3、spring-servlet.xml配置文件
**此配置文件在springboot中不需要配置 - “习惯大于配置”**
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:context="http://www.springframework.org/schema/context" xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:p="http://www.springframework.org/schema/p" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd"> <!-- 设置使用注解的类所在的jar包 --> <context:component-scan base-package="org.lanqiao.service"/> <context:component-scan base-package="org.lanqiao.controller"/> <!--读取属性文件--> <context:property-placeholder location="classpath:config.properties" ignore-unresolvable="true"/> <!-- 注册HandlerMapping和HandlerAdapter组件 --> <mvc:annotation-driven/> <!-- 对静态资源文件的访问 支持访问WEB-INF目录 --> <mvc:default-servlet-handler/> <!-- 对转向页面的路径解析。prefix:前缀,suffix:后缀 --> <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver" p:prefix="/" p:suffix=".jsp"/> <!--文件上传--> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <property name="maxUploadSize" value="104857600"/> <property name="maxInMemorySize" value="4096"/> <property name="defaultEncoding" value="UTF-8"/> </bean> </beans>
4、controller代码
若是一次上传多个文件，需要使用注解@RequestParam("inputName") 指明该文件对应表单中的input标签的name属性。如果name都是同名的，可以使用MultipartFile [] 文件数组来接收
@Controller public class UserController { @Autowired UserService userService; @Value("${file.location.path}") private String fileLocation; @RequestMapping("/insert") public String insert(User user, MultipartFile file){ String uri = FileUpload.upload(file,"/upload",fileLocation); user.setFacePic(uri); int ret = userService.insertUser(user); if(ret > 0 ){ return "redirect:/get"; }else{ return "register"; } } }
5、上传工具类代码
public class FileUpload { /** * @param file 上传的文件 * @param path 文件的虚拟路径，例如 /upload * @param fileLocation 文件的物理路径，例如d:/upload * @return 文件的虚拟路径+文件名 * * fileName.lastIndexOf(".")为获取后缀名 * UUID.randomUUID()为获取唯一标识，保证文件的唯一性 */ public static String upload(MultipartFile file, String path, String fileLocation) { String fileFinishName = null; try { // 如果目录不存在则创建 File uploadDir = new File(fileLocation); if (!uploadDir.exists()) { uploadDir.mkdir(); } //获取源文件名称 String fileName = file.getOriginalFilename(); fileFinishName = UUID.randomUUID() + fileName.substring(fileName.lastIndexOf("."), fileName.length()); //上传文件到指定目录下 File uploadFile = new File(uploadDir + uploadDir.separator + fileFinishName); file.transferTo(uploadFile); } catch (Exception ex) { ex.printStackTrace(); } return path + "/" + fileFinishName; } }
三、基于Ajax的图片上传
这种方式同第一种方式一样都是使用multipart/form-data方式上传，服务器端同样使用springMVC（springboot）实现所以只有页面代码不一致，其他代码（2、3、4、5）同上。
该方式前端使用的是jQuery的jquery.fileupload.js插件来实现。详见大神文章：https://blog.csdn.net/qq_37936542/article/details/79258158
1、页面先一用jQuery的插件
下载地址：https://github.com/blueimp/jQuery-File-Upload
**顺序不能错误**
<script src="js/jquery-3.2.1.min.js"></script> <!-- jquery file upload相关js --> <script src="js/jquery.ui.widget.js"></script> <script src="js/jquery.iframe-transport.js"></script> <script src="js/jquery.fileupload.js"></script> <script src="js/jquery.fileupload-process.js"></script> <script src="js/jquery.fileupload-validate.js"></script>
2、HTML代码编写
**不需要form标签**
<style> /* input样式 */ #uploadImg{ display: none; } /* button样式 */ #chooseFile{ background: #93b6fc; } #uploadFile,#rechooseFile { display: none; background: #93b6fc; } #image{ width:200px; height:200px; } /* 进度条样式 */ .bar { background-image: -webkit-linear-gradient(top,#5cb85c 0,#449d44 100%); background-image: -o-linear-gradient(top,#5cb85c 0,#449d44 100%); background-image: -webkit-gradient(linear,left top,left bottom,from(#5cb85c),to(#449d44)); background-image: linear-gradient(to bottom,#5cb85c 0,#449d44 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff449d44', GradientType=0); background-repeat: repeat-x; height: 20px; line-height: 20px; -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15); box-shadow: inset 0 -1px 0 rgba(0,0,0,.15); -webkit-transition: width .6s ease; -o-transition: width .6s ease; transition: width .6s ease; } #progress { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebebeb', endColorstr='#fff5f5f5', GradientType=0); background-repeat: repeat-x; height: 20px; width: 0%; margin-bottom: 20px; overflow: hidden; background-color: #f5f5f5; border-radius: 4px; -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1); box-shadow: inset 0 1px 2px rgba(0,0,0,.1); margin-top: 20px; } </style> <body> <div class="jquery-fileupload"> <div class=""> <input id="uploadImg" type="file" name="uploadImg" multiple style="display: none" /> <button id="chooseFile">+选择文件</button> <button id="uploadFile">~开始上传</button> <button id="rechooseFile">+重新选择</button> </div> <div> <img id="image" src=""> </div> <div id="progress"> <div class="bar" style="width: 0%;"></div> </div> </div> </body>
3、js代码
$(function() { $("#chooseFile").on("click", function() { $("#uploadImg").click(); }); $('#uploadImg').fileupload({ url : '/upload',//请求发送的目标地址 Type : 'POST',//请求方式 ，可以选择POST，PUT或者PATCH,默认POST //dataType : 'json',//服务器返回的数据类型 autoUpload : false, acceptFileTypes : /(gif|jpe?g|png)$/i,//验证图片格式 maxNumberOfFiles : 1,//最大上传文件数目 maxFileSize : 1000000, // 文件上限1MB minFileSize : 100,//文件下限 100b messages : {//文件错误信息 acceptFileTypes : '文件类型不匹配', maxFileSize : '文件过大', minFileSize : '文件过小' } }) //图片添加完成后触发的事件 .on("fileuploadadd", function(e, data) { //validate(data.files[0])这里也可以手动来验证文件格式和大小 //隐藏或显示页面元素 $('#progress .bar').css( 'width', '0%' ); $('#progress').hide(); $("#chooseFile").hide(); $("#uploadFile").show(); $("#rechooseFile").show(); //获取图片路径并显示 var url = getUrl(data.files[0]); $("#image").attr("src", url); //绑定开始上传事件 $('#uploadFile').click(function() { $("#uploadFile").hide(); jqXHR = data.submit(); //解绑，防止重复执行 $("#uploadFile").off("click"); }) //绑定点击重选事件 $("#rechooseFile").click(function(){ $("#uploadImg").click(); //解绑，防止重复执行 $("#rechooseFile").off("click"); }) }) //当一个单独的文件处理队列结束触发(验证文件格式和大小) .on("fileuploadprocessalways", function(e, data) { //获取文件 file = data.files[0]; //获取错误信息 if (file.error) { console.log(file.error); $("#uploadFile").hide(); } }) //显示上传进度条 .on("fileuploadprogressall", function(e, data) { $('#progress').show(); var progress = parseInt(data.loaded / data.total * 100, 10); $('#progress').css( 'width','15%' ); $('#progress .bar').css( 'width',progress + '%' ); }) //上传请求失败时触发的回调函数 .on("fileuploadfail", function(e, data) { console.log(data.errorThrown); }) //上传请求成功时触发的回调函数 .on("fileuploaddone", function(e, data) { alert(data.result); }) //上传请求结束后，不管成功，错误或者中止都会被触发 .on("fileuploadalways", function(e, data) { }) //手动验证 function validate(file) { //获取文件名称 var fileName = file.name; //验证图片格式 if (!/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(fileName)) { console.log("文件格式不正确"); return true; } //验证excell表格式 /* if(!/.(xls|xlsx)$/.test(fileName)){ alert("文件格式不正确"); return true; } */ //获取文件大小 var fileSize = file.size; if (fileSize > 1024 * 1024) { alert("文件不得大于一兆") return true; } return false; } //获取图片地址 function getUrl(file) { var url = null; if (window.createObjectURL != undefined) { url = window.createObjectURL(file); } else if (window.URL != undefined) { url = window.URL.createObjectURL(file); } else if (window.webkitURL != undefined) { url = window.webkitURL.createObjectURL(file); } return url; } });
四、基于Base64压缩的图片上传
图片的Base64 编码就是可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址。例如：
基于Base64实现图片上传其实就是在浏览器端先将图片转换成字符串，然后将代表图片的字符串传输到服务器进行存储。需要显示的时候可以将字符串写入<img src="">直接显示。
该图片上传的方式比较简单，且没有其他的例如跨域提交、头文件等问题。但是其编码后的字符串大小远远大于实际的图片大小。所以只适合上传小尺寸的图片，例如用户头像等。
1、页面代码
$("#img").change(function (e) {
var img = e.target.files[0];
var reader = new FileReader();
reader.readAsDataURL(img);
reader.onload = function (e) {
// ajax 上传图片
$.post("uploadPic", {img: e.target.result}, function (ret) {
if (ret.img != '') {
//显示图片
$('#showimg').attr("src", ret.imgUrl);
}
}, 'json');
}
})；
2、服务器接收到Base64字符串，就可以得到图片并且将图片直接存入数据库。这里不再描述。
五、配置图片访问路径
1、Springboot中可以使用下面的代码将虚拟路径/image/**下的图片映射成到D://盘下。
import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport; /** * 图片绝对地址与虚拟地址映射 * 访问地址示例：http://localhost:8080/image/1.png */ @Configuration public class WebMvcConfig extends WebMvcConfigurationSupport { @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { //windows //registry.addResourceHandler("/image/**").addResourceLocations("file:d://upload/"); //linux和mac registry.addResourceHandler("/image/**").addResourceLocations("file:/Users/David/upload/"); registry.addResourceHandler("/**").addResourceLocations("classpath:/static/"); } }
2、如果使用springMVC的SSM框架，则可以在tomcat的service.xml文件中直接配置虚拟路径，代码如下：
<Context docBase="/Users/David/upload" path="/image" reloadable="true"/>
参考资料：
https://www.imooc.com/article/27804
