• springmvc fileupload


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

  • 相关阅读:
    HTML超文本标记语言(八)——表单<form>
    如何理解JavaScript中给变量赋值,是引用还是复制
    PostCSS 实战
    sass 工具库
    微信小程序-制作简易豆瓣笔记
    学习pano2vr制作html5全景笔记
    git命令笔记
    Gulp实战
    html5-离线存储
    html5
  • 原文地址:https://www.cnblogs.com/xiaoyezi/p/8942411.html
Copyright © 2020-2023  润新知