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配置文件**此配置文件内容在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代码@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的插件**顺序不能错误** <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,#449d44 100%); background-image: -webkit-gradient(linear,left top,left bottom,from(#5cb85c),to(#449d44)); background-image: linear-gradient(to bottom,#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,.15); box-shadow: inset 0 -1px 0 rgba(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,.1); box-shadow: inset 0 1px 2px rgba(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 : ‘/FileTest/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",data) { //获取文件 file = data.files[0]; //获取错误信息 if (file.error) { console.log(file.error); $("#uploadFile").hide(); } }) //显示上传进度条 .on("fileuploadprogressall",data) { $(‘#progress‘).show(); var progress = parseInt(data.loaded / data.total * 100,10); $(‘#progress‘).css( ‘width‘,‘15%‘ ); $(‘#progress .bar‘).css( ‘width‘,progress + ‘%‘ ); }) //上传请求失败时触发的回调函数 .on("fileuploadfail",data) { console.log(data.errorThrown); }) //上传请求成功时触发的回调函数 .on("fileuploaddone",data) { alert(data.result); }) //上传请求结束后,不管成功,错误或者中止都会被触发 .on("fileuploadalways",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; } }); (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |