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 ...