springmvc+ajax上传图片

pom文件导入上传文件jar包

     <!--上传文件--><dependency><groupId>commons-io</groupId><artifactId>commons-io</artifactId><version>2.4</version></dependency><dependency><groupId>commons-fileupload</groupId><artifactId>commons-fileupload</artifactId><version>1.3.1</version></dependency>

html代码

<input type="file" id="inputFile" style="display: none;"/><div style="width: 300px; height: 200px;" onclick="$('#inputFile').click()"><p>请选择图片:</p><img src="" id="showImg"style="width: 300px; height: 200px; display: none; position: absolute; top: 0; left: 0;"/></div>

js文件显示缩略图

$(function(){$("#inputFile").on("change",function(){var file=this.files[0];if(this.files && file){var reader=new FileReader();reader.onload=function(e){$("#showImg").attr("src",e.target.result);}reader.readAsDataURL(file);}});
});

ajax上传文件

var empName = $.trim(consoleDlg.find("#empName").val());
var formData = new FormData(); //不能传的参数太多，好像有限制，一般传文件和描述即可
formData.append("photo", document.getElementById("inputFile").files[0]);
formData.append("empName",empName);
console.log(formData)
$.ajax({url : "/add",type : 'POST',cache : false,data : formData,dataType : 'json',contentType: false,processData: false,async : true,success : function(response) {},error : function(textStatus, e) {alert("系统ajax交互错误: " + textStatus);}
});

springmvc配置上传文件的大小限制等

<!-- 上传文件 --><bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"><property name="defaultEncoding" value="utf-8"/><!-- 最大内存大小 --><property name="maxInMemorySize" value="10240"/><!-- 最大文件大小，-1为不限制大小 --><property name="maxUploadSize" value="-1"/></bean>

controller类接收及图片保存（测试没有使用service层）

    @RequestMapping(value={"/add"})@ResponseBodypublic Msg add(@RequestParam("photo") MultipartFile[] files,@RequestParam("empName") String empName) {String filename = files[0].getOriginalFilename();// 文件名String[] strArray = filename.split("\\.");int suffixIndex = strArray.length -1;
//        File file = new File(System.getProperty("evan.webapp")+"/upload/"+UUID.randomUUID().toString().substring(10)+"."+strArray[suffixIndex]);File file = new File("D:"+"/upload/"+UUID.randomUUID().toString().substring(10)+"."+strArray[suffixIndex]);try {FileUtils.copyInputStreamToFile(files[0].getInputStream(), file);} catch (IOException e) {e.printStackTrace();}return Msg.success();}

springmvc+ajax上传图片相关推荐

SpringMvc+ajax实现文件跨域上传
最近开始学习SpringMVC框架,在学习数据绑定的时候,发现可以使用@RequestParam注解绑定请求数据,实现了文件上传.但是如果一个项目是前后端分离的,前端系统向后端服务上传文件该怎么解决了 ...
mvc中ajax的跳转,springmvc ajax 跳转的学习笔记
Spring Web MVC是什么 Spring Web MVC是一种基于Java的实现了Web MVC设计模式的请求驱动类型的轻量级Web框架,下面我们来看一篇关于springmvc ajax 跳转 ...
java mvc上传文件进度_java相关：springMVC+ajax实现文件上传且带进度条实例
java相关:springMVC+ajax实现文件上传且带进度条实例发布于 2020-7-5| 复制链接本篇文章主要介绍了springMVC+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上传图片

springmvc+ajax上传图片相关推荐

最新文章

热门文章