一、简介

通过把文件上传到tomcat的虚拟目录，实现代码和资源文件分开。

二、环境

spring+springmvc+mybatis

三、代码实现

1.导入文件上传的jar

       <!--上传图片--><!-- https://mvnrepository.com/artifact/commons-fileupload/commons-fileupload --><dependency><groupId>commons-fileupload</groupId><artifactId>commons-fileupload</artifactId><version>1.4</version></dependency>

2.在springmvc.xml中配置multipart类型解析器

 <!--文件上传配置--><bean id="multipartResolver"  class="org.springframework.web.multipart.commons.CommonsMultipartResolver"><!-- 请求的编码格式，必须和jSP的pageEncoding属性一致，以便正确读取表单的内容，默认为ISO-8859-1 --><property name="defaultEncoding" value="utf-8"/><!-- 上传文件大小上限，单位为字节（10485760=10M） --><property name="maxUploadSize" value="10485760"/><property name="maxInMemorySize" value="40960"/></bean>

3.springmvc文件上传

package com.test.demo.controller;import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.commons.CommonsMultipartFile;import javax.servlet.http.HttpServletRequest;
import java.io.*;@Controller
public class UploadController {/*** 图片上传接口* @param model* @return*/@RequestMapping(value = "/uploads",method = {RequestMethod.POST})@ResponseBodypublic String fileUploads(@RequestParam("file") CommonsMultipartFile file , HttpServletRequest request, Model model) throws IOException {//获取文件名 : file.getOriginalFilename();String uploadFileName = file.getOriginalFilename();String data=null;//如果文件名为空，直接回到首页！if ("".equals(uploadFileName)){data="";//封装数据return data;}System.out.println("上传文件名 : "+uploadFileName);//上传路径保存设置String path = request.getServletContext().getRealPath("/upload");//如果路径不存在，创建一个File realPath = new File(path);if (!realPath.exists()){realPath.mkdir();}System.out.println("上传文件保存地址："+realPath);InputStream is = file.getInputStream(); //文件输入流OutputStream os = new FileOutputStream(new File(realPath,uploadFileName)); //文件输出流//读取写出int len=0;byte[] buffer = new byte[1024];while ((len=is.read(buffer))!=-1){os.write(buffer,0,len);os.flush();}os.close();is.close();System.out.println(realPath+"/"+uploadFileName);//返回给前端图片名data=uploadFileName;//封装数据return data;}
}

4.前端使用ajax

<p>文件上传</p>
<div class="san3"><input type="file" name="fujianID" id="fujianID" onchange="UpdateFile()"/><input type = "hidden" name="fujianid" id="file2" />
</div><script>//上传文件function UpdateFile(){var file_fujian = $("input[name='fujianID']").val();//用户文件内容(文件)// 判断文件是否为空if ( file_fujian== "") {layer.msg("青选择上传的附件",{icon:1,time:1000});return false;}//判断文件类型,根据自己需要来做判断/*var fujianID =  file_fujian.substring( file_fujian.lastIndexOf(".") + 1).toLowerCase();if(fujianID != "xls" && fujianID !="xlsx"&&fujianID !="docx"&&fujianID !="doc"&&fujianID !="txt"){layer.msg("请选择Execl文或者word文件或者txt文件格式!",{icon:1,time:2000});return false;}*///判断文件大小var size1 = $("input[name='fujianID']")[0].files[0].size;if (size1>104857600) {layer.msg("上传的附件不能大于100M",{icon:1,time:2000});return false;}boo1 = true;var type = "file";var formData = new FormData();//这里需要实例化一个FormData来进行文件上传formData.append(type,$("#fujianID")[0].files[0]);$.ajax({type:'POST',url:"uploads",data:formData,async:false,processData:false,contentType:false,success:function(res){console.log(res)}});}
</script>

如果想要显示你的上传成功的图片需要配置tomcat的·虚拟目录映射

找到这个目录点击OK

最后别忘了设置路径

SpringMVC使用AJAX上传图片相关推荐

使用SpringMVC解决Ajax跨域问题
使用SpringMVC解决Ajax跨域问题参考文章: (1)使用SpringMVC解决Ajax跨域问题 (2)https://www.cnblogs.com/mengyao/p/6294787.ht ...
springMVC通过ajax传递参数list对象或传递数组对象到后台
springMVC通过ajax传递参数list对象或传递数组对象到后台环境: 前台传递参数到后台前台使用ajax 后台使用springMVC 传递的参数是N多个对象 JSON对象和JSON字符串 ...
ajax数据传送中文乱码,springmvc 发送ajax出现中文乱码的解决方法汇总
使用spingmvc,在JS里面通过ajax发送请求,并返回json格式的数据,从数据库拿出来是正确的中文格式,展示在页面上就是错误的??,研究了一下,有几种解决办法. 我使用的是sping-web- ...
SpringMVC对Ajax请求的处理
SpringMVC对Ajax请求的处理 [1] 问题: 当浏览器发起一个ajax请求给服务器,服务器调用对应的单元方法处理ajax请求. 而ajax的请求在被处理完成后,其处理结果需要直接响应.而目前 ...
vue用form上传图片_vuejs使用FormData，ajax上传图片文件
我相信很多使用vuejs的朋友,都有采用ajax上传图片的需求,因为前后端分离后,我们希望都能用ajax来解决数据问题,传统的表单提交会导致提交成功后页面跳转,而使用ajax能够无刷新上传图片等文件. ...
C#也能PS图片，还能为网站Ajax上传图片同时生成微缩图(附Demo)
C#也能PS图片,还能为网站Ajax上传图片同时生成微缩图(附Demo) 本文旨在与各位朋友们分享我是如何在项目中用C# "ps图片" 为网站生成同比例微缩图的解决方案.如有不足之 ...
移动端压缩并ajax上传图片解决方案
移动端压缩并ajax上传图片解决方案参考文章: (1)移动端压缩并ajax上传图片解决方案 (2)https://www.cnblogs.com/norm/p/6188318.html 备忘一下.
原生ajax传值php,原生ajax上传图片，php后台处理总结
原生ajax上传图片,php后台处理总结这篇文章发布于 2018/10/03,归类于后端数据库等标签: 原生ajax上传图片,php后台处理图片上传开始做图片上传,发现之前的处理方式基本忘光了 ...
ssm 上传图片到mysql_MySQL+SSM+Ajax上传图片问题的分析（图）
本文主要介绍了MySQL+SSM+Ajax上传图片问题.具有很好的参考价值.下面跟着小编一起来看下吧第一次写上传图片的代码,碰到很多问题.昨天做了整整一天,终于在晚上的时候成功了.大声欢呼. 但是, ...
ajax上传图片java6,java ajax上传图片返回json数
java ajax上传图片返回json数 [2021-02-10 00:12:56] 简介: 解决java的ajax提交返回值中文乱码的方法:1.在RequestMapping的并发配置中加代码[p ...

SpringMVC使用AJAX上传图片

一、简介

二、环境

三、代码实现

1.导入文件上传的jar

SpringMVC使用AJAX上传图片相关推荐

最新文章

热门文章