百度360必应搜狗淘宝本站头条
linux取消挂载yum卸载下横线怎么打mysql 外网访问权限php打乱数组顺序
当前位置：网站首页 > 编程文章 > 正文

SpringMVC+ajaxFileUpload.js实现文件上传

qiyuwang 2024-11-01 14:43 19 浏览 0 评论

在项目中，经常用到的一个功能就是文件的上传和下载，不过大多数情况下都是通用的工具类，自己写的情况较少，这里写个通过Spring框架和ajaxFileUpload插件实现上传的小功能，做个练习和记录。
首先配置下SpringMVC的配置文件，配置支持文件上传

<!-- 配置MultipartResolver 用于文件上传 使用spring的CommosMultipartResolver 
    说明：
    p:defaultEncoding="UTF-8"：这里设置默认的文件编码为UTF-8，必须与用户JSP的默认编码一致；
    p:maxUploadSize="5000000"：指定文件上传大小，单位为字节；
    p:uploadTempDir="fileUpload/temp"：文件上传临时目录，上传完成后，就会将临时文件删除；
    
    -->  
     <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"  
        p:defaultEncoding="UTF-8"  
        p:maxUploadSize="5000000"  
        p:uploadTempDir="fileUpload/temp"  
     >  
    </bean>

然后写个简单的JSP页面，为了方便绑定数据，引入Spring自带的Form表单标签，引入语句

<%@taglib uri="http://www.springframework.org/tags/form" prefix="form" %>

Form表单实现一个简单的注册功能，虽然说美感不好，这里还是引用了下bootstrap做了个简单的排版。因为原版的file标签的格式无法调整，所有用了其他的小标签代替，然后用按钮去触发file标签

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
request.setAttribute("_path", path);
%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form" %> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
    
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
    <link rel="stylesheet" href="<%=basePath%>static/css/bootstrap.css"/>
    <script type="text/javascript" src="<%=basePath%>static/js/jquery.min.js"></script>
    <script type="text/javascript" src="<%=basePath%>static/js/ajaxfileupload.js"></script>
    <script type="text/javascript" src="<%=basePath%>static/js/bootstrap.js"></script>
    <script type="text/javascript" src="<%=basePath%>static/js/jquery.json-2.4.js" charset="UTF-8"></script> 
    <script type="text/javascript">
        var path = "${_path}";
        $(function(){
            
            /* 重置Form表单功能 */
            $("#clean").click(function(){
                document.getElementById("user").reset();
                $("#userName").attr("value","");
                $("#password").attr("value","");
                $("#name").attr("value","");
                $("#sex").attr("value","");
                $("#file").attr("value","");
            });
            
            /* begin 附件上功能 */
            $("#choose").click(function(){
                $("#fileUpload").click();
            });
            $("#fileUpload").change(function(){
                $("#file").attr("value",$("#fileUpload").val());
                $.ajaxFileUpload({  
                    type: "POST",  
                    url: path+"/fileUpload.do",  
                    data:{fileName:$("#fileUpload").val()},//要传到后台的参数，没有可以不写  
                    secureuri : false,//是否启用安全提交，默认为false  
                    fileElementId:'fileUpload',//文件选择框的id属性  
                    dataType: 'json',//服务器返回的格式  
                    async : false,  
                    success: function(mes){  
                       if(mes.message=="OK"){
                           alert("附件上传成功");
                       }
                       if(mes.message=="NG"){
                           alert("附件上传失败");
                       }
                    },  
                    error: function (){  
                        alert("附件上传失败");
                    }  
                });
            });
            /* end 附件上功能 */
        });
    </script>
  </head>
  
  <body>
  <div class="container" style="width: 100%" >
    <div> </div>
    <div class="row">
        <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5"></div>
        <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1" >注册页面</div>
    </div>
   <div> </div>
   <div class="row">
        <form:form commandName="user" action="${_path }/register.do"  method="post" enctype="multipart/form-data">
            <div  class="col-lg-4 col-md-4 col-sm-4 col-xs-4"></div>
            <div  class="col-lg-1 col-md-1 col-sm-1 col-xs-1" style="text-align:right">账号：</div>
            <form:input path="userName" type = "text" value = "" class="input-large"/>
            <div> </div>
            <div  class="col-lg-4 col-md-4 col-sm-4 col-xs-4"></div>
            <div  class="col-lg-1 col-md-1 col-sm-1 col-xs-1" style="text-align:right">密码：</div>
            <form:input path="password" type = "password" class="input-large"/>
            <div> </div>
            <div  class="col-lg-4 col-md-4 col-sm-4 col-xs-4"></div>
            <div  class="col-lg-1 col-md-1 col-sm-1 col-xs-1" style="text-align:right">姓名：</div>
            <form:input path="name" type = "text" value = "" class="input-large"/>
            <div> </div>
            <div  class="col-lg-4 col-md-4 col-sm-4 col-xs-4"></div>
            <div  class="col-lg-1 col-md-1 col-sm-1 col-xs-1" style="text-align:right">性别：</div>
            <form:input path="sex" type = "text" value = "" class="input-large"/>
            <div> </div>
            <div  class="col-lg-4 col-md-4 col-sm-4 col-xs-4"></div>
            <div  class="col-lg-1 col-md-1 col-sm-1 col-xs-1" style="text-align:right">附件：</div>
            <input id = "fileUpload" name = "fileUpload" type = "file"  style=" display: none">
            <form:input type ="text" class="input-large" path= "file" />
            <input id ="choose" type="button" value = "选择" class="btn btn-primary btn-xs"/>
            <div> </div>
            <div  class="col-lg-4 col-md-4 col-sm-4 col-xs-4"></div>
            <div  class="col-lg-2 col-md-2 col-sm-2 col-xs-2" style="text-align:right">
                <input id = "upload" type = "submit" value = "提交" class="btn btn-default btn-sm"/>
                    
                <input id ="clean" type="button" value = "清除" class="btn btn-default btn-sm"/>
            </div>
            
        </form:form>
    </div>
  </div>
  </body>
</html>

后台页面控制器，因为用了SpringMVC的form表单，所以在渲染的时候模型中一定要有user这个对象，所以我们用控制器跳转页面

@RequestMapping("/Login.do")
    public String Login(@ModelAttribute("user") User user, Model model){
        System.out.println("进入");
        user.setName("小明");
        user.setSex("男");
        user.setUserName("叶良辰");
        model.addAttribute("user", user);
        
        return "index";
        
    }

这里为了显示SpringMVC form的自动绑定功能，我给user对象设置了值，在JSP页面，如果form:input标签由path属性和user里的属性一样，会自动设置值

附件的js代码在上面的JSP页面中已经写好了，下面是后台控制的controller，因为我们配置了multipartResolver，所以form表单是设置了enctype="multipart/form-data，后台一样能直接取出文本值
接受文本框内容的controller

    @RequestMapping("/register.do")
    public String register(@ModelAttribute("user") User user, Model model){

        model.addAttribute("user", user);
        System.out.println(user);
        return "index";
        
    }

附件上传的controller

    @RequestMapping("/fileUpload.do")
    public @ResponseBody Message fileUpload(HttpServletRequest request,@RequestParam("fileUpload") MultipartFile file,
            @RequestParam("fileName") String fileName,@ModelAttribute("user") User user,Model model,Message mes){
        
        //简单判断文件是否为空
        if(!file.isEmpty()){
            
            try {
                // 文件保存路径  
                String filePath = request.getSession().getServletContext().getRealPath("/") + "fileUpload/"  
                        + file.getOriginalFilename();
                file.transferTo(new File(filePath));
                mes.setMessage("OK");
            } catch (Exception e) {
                mes.setMessage("NG");
                e.printStackTrace();
            }
        }
        user.setFile(fileName);
        System.out.println(fileName);
        model.addAttribute("user", user);
        System.out.println(user);
        return mes;
        
    }

相关推荐

PayPal严重漏洞可通过不安全的JAVA反序列化对象

在2015年12月,我在PayPal商业网站(manager.paypal.com)中发现了一个严重的漏洞,这个漏洞的存在,使得我可以通过不安全的JAVA反序列化对象,在PayPal的网站服务器上远程...

提醒:Apache Dubbo存在反序列化漏洞

背景：近日监测到ApacheDubbo存在反序列化漏洞（CVE-2019-17564），此漏洞可导致远程代码执行。ApacheDubbo是一款应用广泛的高性能轻量级的JavaRPC分布式服务框架...

【预警通报】关于WebLogicT3存在反序列化高危漏洞的预警通报

近日，我中心技术支撑单位监测到WebLogicT3存在反序列化0day高危漏洞，攻击者可利用T3协议进行反序列化漏洞实现远程代码执行。...

Apache dubbo 反序列化漏洞(CVE-2023-23638)分析及利用探索

在对Apachedubbo的CVE-2023-23638漏洞分析的过程中，通过对师傅们对这个漏洞的学习和整理，再结合了一些新学的技巧运用，从而把这个漏洞的利用向前推了一步。整个过程中的研究思路以及...

案例|WebLogic反序列化漏洞攻击分析

目前网络攻击种类越来越多，黑客的攻击手段也变得层出不穷，常规的防护手段通常是对特征进行识别，一旦黑客进行绕过等操作，安全设备很难发现及防御。通过科来网络回溯分析系统可以全景还原各类异常网络行为，记录所...

【预警通报】关于ApacheOFBizRMI反序列化远程代码 执行高危漏洞的预警通报

近日，我中心技术支撑单位监测发现ApacheOFBiz官方发布安全更新，修复了一处远程代码执行漏洞。成功利用该漏洞的攻击者可造成任意代码执行，控制服务器。该漏洞编号：CVE-2021-26295，安...

关于OracleWebLogic wls9-async组件存在反序列化远程命令执行高危漏洞的预警通报

近日，国家信息安全漏洞共享平台（CNVD）公布了OracleWebLogicwls9-async反序列化远程命令执行漏洞。攻击者利用该漏洞，可在未授权的情况下远程执行命令。该漏洞安全级别为“高危”。现...

Rust语言从入门到精通系列 - Serde序列化/反序列化模块入门指北

Serde是一个用于序列化和反序列化Rust数据结构的库。它支持JSON、BSON、YAML等多种格式，并且可以自定义序列化和反序列化方式。Serde的特点是代码简洁、易于使用、性能高效。...

Java反序列化漏洞详解（java反序列化漏洞利用）

Java反序列化漏洞从爆出到现在快2个月了，已有白帽子实现了jenkins，weblogic，jboss等的代码执行利用工具。本文对于Java反序列化的漏洞简述后，并对于Java反序列化的Poc进行详...

关于Oracle WebLogic Server存在反序列化远程代码执行漏洞的安全公告

安全公告编号:CNTA-2018-00222018年7月18日，国家信息安全漏洞共享平台（CNVD）收录了OracleWebLogicServer反序列化远程代码执行漏洞（CNVD-2018-13...

CVE-2020-9484 Apache Tomcat反序列化漏洞浅析

本文是i春秋论坛作家「Ybwh」表哥原创的一篇技术文章，浅析CVE-2020-9484ApacheTomcat反序列化漏洞。01漏洞概述这次是因为错误配置和org.apache.catalina....

告别脚本小子系列丨JAVA安全(8)——反序列化利用链(下)

0x01前言...

关于WebLogic反序列化高危漏洞的紧急预警通报

近日，WebLogic官方发布WebLogic反序列化漏洞的紧急预警通告，利用该漏洞可造成远程代码执行并直接控制Weblogic服务器，危害极大。该漏洞编号为：CVE-2019-2890，安全级别为“...

高危!Fastjson反序列化漏洞风险通告

漏洞描述...

学习Vulhub的Java RMI Registry 反序列化漏洞

这个实验，我们先通过dnslog演示命令执行，然后通过反弹shell获得root权限。JavaRemoteMethodInvocation用于在Java中进行远程调用。RMI存在远程bind的...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表