1.pom文件中fileupload的dependencyyinr

<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.1</version>
</dependency>

2.springmvc配置文件

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!-- 上传的最大限制 -->
<property name="maxUploadSize" value="209715200" />
<!-- 默认编码 -->
<property name="defaultEncoding" value="UTF-8" />
<!-- 上传文件的解析 -->
<property name="resolveLazily" value="true" />
</bean>

3.前台jsp

<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path;
%>
<html>
<head> <script type="text/javascript" src="<%=basePath%>/js/jquery.min.js"></script>
<style type="text/css">
#pic{
width:200px;
height:200px;
/* border-radius:50% ; */
margin:20px auto;
cursor: pointer;
}
</style> </head>
<c:import url="main.jsp"></c:import>
<body>
<input id="serverPath" type="hidden" value="<%=basePath %>"/>
<form enctype="multipart/form-data" id="uploadForm">
<div>省:<input type="text" id="province"></div>
<div>市:<input type="text" id="city"></div>
<img id="pic" src="<%=basePath%>/images/upload_img.png" >
<input id="upload_file" name="upload_file" accept="image/*" type="file" style="display: none"/>
<input type="button" id="uploadPicButton" value="上传" onclick="uploadPic()">
</form>
</body>
</html>

4.js代码

var serverPath;

$(function() {
serverPath = $("#serverPath").val();
$("#pic").click(function () {
$("#upload_file").click(); //隐藏了input:file样式后,点击头像就可以本地上传
$("#upload_file").on("change",function(){
var objUrl = getObjectURL(this.files[0]) ; //获取图片的路径,该路径不是图片在本地的路径
if (objUrl) {
$("#pic").attr("src", objUrl) ; //将图片路径存入src中,显示出图片
}
});
});
}); //建立一個可存取到該file的url
function getObjectURL(file) {
var url = null ;
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
} function uploadPic(){
var pic = $('#upload_file')[0].files[0];
var fd = new FormData();
fd.append('file', pic);
fd.append('province', $('#province').val());
fd.append('city', $('#city').val());
$.ajax({
url:serverPath + "/bmdList/test",
type:"post",
// Form数据
data: fd,
cache: false,
contentType: false,
processData: false,
success:function(data){
alert(data);
}
}); }

5.后台代码

@RequestMapping(value = "/test",method = RequestMethod.POST)
@ResponseBody
public String test(PhoneCardEntity entity) throws IOException{
System.out.println("省:"+entity.getProvince());
System.out.println("市:"+entity.getCity());
System.out.println(entity.getFile().getOriginalFilename());
byte[] bytes = entity.getFile().getBytes();
return "success";
}

6.entity代码

private String province; // 省
private String city; // 市
private MultipartFile file;

----------------------------------------------------------------------------------华丽的分割线----------------------------------------------------------------------------------------

执行效果

1/ 页面初始化

2.选择图片及输入内容

3.点击上传后台输出log

springmvc fileupload的更多相关文章

  1. 3.2.3 SpringMVC注解式开发

    SpringMVC注解式开发 1. 搭建环境 (1) 后端控制器无需实现接口 , 添加相应注解 Controller类添加注解 @Controller //该注解表将当前类交给spring容器管理 @ ...

  2. SpringMVC的文件上传与下载

    1. 单文件上传 配置jsp页面 <%@ page contentType="text/html;charset=UTF-8" language="java&quo ...

  3. spring之文件上传

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  4. dwz+jquery+fileupload+springmvc实现文件上传 及图片预览

    1 前台jsp:文件的上传利用了iframe实现局部刷新功能.使用了apache的fileupload组件,用到的jar: commons-fileupload.jar,commons-io.jarD ...

  5. SpringMVC使用FileUpload上传文件

    进口FileUpload和common-io的Jar包 注意:1.Struts2其它方法需要使用的:struts2过滤,将改变reqeust类型,由HttpServletRequest成为MultiP ...

  6. java.lang.ClassNotFoundException: org.apache.commons.fileupload.FileItemFactory报错springmvc

    转自:https://blog.csdn.net/qq_41879385/article/details/82892555 下面是错误信息:java.lang.ClassNotFoundExcepti ...

  7. springMVC学习笔记--知识点总结1

    以下是学习springmvc框架时的笔记整理: 结果跳转方式 1.设置ModelAndView,根据view的名称,和视图渲染器跳转到指定的页面. 比如jsp的视图渲染器是如下配置的: <!-- ...

  8. springmvc的图片上传与导出显示

    1.前端文件上传需要在form表单内添加enctype="multipart/form-data" ,以二进制传递: 2.web.xml文件内配置 <servlet-mapp ...

  9. 基于Spring+SpringMVC+Mybatis的Web系统搭建

    系统搭建的配置大同小异,本文在前人的基础上做了些许的改动,重写数据库,增加依据权限的动态菜单的实现,也增加了后台返回json格式数据的配置,详细参见完整源码. 主要的后端架构:Spring+Sprin ...

随机推荐

  1. windows phone 8.0 app 移植到windows10 app笔记

    8.0 public class Convisibility : IValueConverter { public object Convert(object value, Type targetTy ...

  2. 激活IDEA,pycharm方法

    1.修改hosts文件将0.0.0.0 account.jetbrains.com添加到hosts文件最后,注意hosts文件无后缀,如果遇到无法修改或权限问题,可以采用覆盖的方法去替换hosts文件 ...

  3. “全栈2019”Java多线程第十六章:同步synchronized关键字详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java多 ...

  4. 真机测试 Thnetwork connection was lost. No profiles for 'xxx' were found: Xcode couldn't find a provisioning profile matching 'xxx'. Code signing is required for product type

    最近接手了一个新项目,是从外包接手的,结果出现了很多问题,真的很崩溃,崩溃,吐槽一下 问题一:一直请求不到数据,因为外包只做了一版,上架的这个版本是可以显示数据的,但是给我的项目是没有数据的,因为并没 ...

  5. 记一次优化ansible inventory的小例子

    起因: 阿里云新扩容一批机器,要对上面的flume配置做修改 之前的inventory是这样子的 [user@vip10-ali-tj-console host_vars]$ sdiff vip10- ...

  6. MYSQL处理高并发,防止库存超卖(图解)

    抢购场景完全靠数据库来扛,压力是非常大的,我们在最近的一次抢购活动改版中,采用了redis队列+mysql事务控制的方案,画了个简单的流程图: 先来就库存超卖的问题作描述:一般电子商务网站都会遇到如团 ...

  7. Azure 部署K8S(二)

    在"China Azure中部署Kubernetes(K8S)集群"一文中,我们使用的ACS Version及Kubernete Version版本都比较低,ACS Version ...

  8. QuantLib 金融计算——基本组件之 InterestRate 类

    目录 QuantLib 金融计算--基本组件之 InterestRate 类 InterestRate 对象的构造 一些常用的成员函数 如果未做特别说明,文中的程序都是 Python3 代码. Qua ...

  9. 【算法笔记】B1053 住房空置率

    看了半天发现是题目理解错了,可能空置的里面观察期超过D则判定空置,而不是用电量低于e的天数超过D. code #include <bits/stdc++.h> using namespac ...

  10. thinkphp5.0 CURL用post请求接口数据

    //测试 请求接口 public function index(){ $arr = array('a'=>'555','b'=>56454564); $data=$this->pos ...