首页 > 代码库 > springMVC的多文件的异步上传实现

springMVC的多文件的异步上传实现

  springMVC的MultipartFile与传统的ajax文件上传兼容性不好,采用如下的ajax方法,后台无法获取文件。

$.ajax({ 
  url: ‘/upload‘,
  type: ‘POST‘,
  cache: false,
  data: new FormData($(‘#uploadForm‘)[0]),
  processData: false,
  contentType: false
}).done(function(res) { }).fail(function(res) {});

  服务器端代码需要使用从查询参数名为file获取文件输入流对象,因为<input>中声明的是name="file"但是上述方式,只能传递一般的参数,上传文件的文件流是无法被序列化并传递的。

------------------------------------------------------------------------------------分割线------------------------------------------------------------------------------------

采用以下方式完美解决:

1.引入需要的js文件

 

<script type="text/javascript" src="../lycaen/js/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="../lycaen/js/jquery/jquery-ui.min.js"></script>
    <script type="text/javascript" src="../lycaen/js/jquery/jquery-form.js"></script>
    

 

2.web.xml引入MultiFileUpload

 

 

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee 
    http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
  <!-- 工程采用hi平台,class自行修改 -->
    <servlet>
        <servlet-name>MultiFileUpload</servlet-name>
        <servlet-class>org.hi.framework.lycaen.servlet.MultiFileUpload</servlet-class>
    </servlet>

    <servlet-mapping> 
        <servlet-name>MultiFileUpload</servlet-name> 
        <url-pattern>/MultiFileUpload</url-pattern> 
    </servlet-mapping>

 

3.spring容器定义multipartResolver

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE beans PUBLIC "-//SPRING//DTD BEAN//EN" "http://www.springframework.org/dtd/spring-beans.dtd">
<beans>
<!-- 工程采用hi平台,class自行修改 -->
    <bean id="multipartResolver" class="org.hi.framework.HiMultipartResolver">
<!--         url中带有该属性值的 http 请求就不会被 multipartResolver 先解析   -->
        <property name="excludeUrls" value="lycaenMultipleFileUpload"/>
        <property name="maxUploadSize" value="100000000" />  
        <property name="defaultEncoding" value="UTF-8" />
    </bean>
</beans>

4.前台demo

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<style type="text/css">
    div.mainContener{
        padding-top: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        padding-left: 10px;
    }
    
    #submit_click { text-align:center;margin-top:32px; height:40px;}  
    #submit_click a   
{  
      
  
    text-decoration:none;  
    background:#0a6dbe;
    color:#f2f2f2;  
      
    padding: 10px 30px 10px 30px;  
    font-size:16px;  
    font-family: 微软雅黑,宋体,Arial,Helvetica,Verdana,sans-serif;  
    font-weight:bold;  
    border-radius:3px;  
      
    -webkit-transition:all linear 0.30s;  
    -moz-transition:all linear 0.30s;  
    transition:all linear 0.30s;  
      
    }  
   #submit_click a:hover { background:#385f9e; }  
   
   
   .upload_click { text-align:center;margin-top:32px; height:40px;}  
    .uoload_click a   
{  
      
  
    text-decoration:none;  
    background:#2f435e;  
    color:#f2f2f2;  
      
    padding: 10px 30px 10px 30px;  
    font-size:16px;  
    font-family: 微软雅黑,宋体,Arial,Helvetica,Verdana,sans-serif;  
    font-weight:bold;  
    border-radius:3px;  
      
    -webkit-transition:all linear 0.30s;  
    -moz-transition:all linear 0.30s;  
    transition:all linear 0.30s;  
      
    }  
  

    table.gridtable {
        font-family: Microsoft YaHei;
        font-size:14px;
        color:#333333;
        border-width:1px;
        border-color:#666666;
        border-collapse: collapse;
        padding-top: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        padding-left: 10px;
    }
    table.gridtable .title {
        font-weight:bold;
        background-color:#f2f5f7;
        text-align:center;

    }
    table.gridtable th {
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #ced9e0;
        background-color: #e0ecff;
    }
    table.gridtable td {
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #ced9e0;
        background-color: #ffffff;
    }



    input[type=button]{
        height:30px;
        width:236px;
        background-color:#d7ebf9;
        border:1px solid #99D3F5;
        border-radius:3px;
        font-size:14px;
        color:#0078de;
    }

    td.leftHead{
        text-align: center;
    }
</style>

    <div class="mainContener">
        <table class="gridtable" align = "center" width="98%" >
            <tr class="title">
                <th width="15%">考核要点(分值)</th>
                <th width="60%">考核内容</th>
                <th width="25%">附件材料要求</th>
                <th width="5%">附件上传</th>
                <th width="10%">自评评分</th>
                <th width="10%">上级评分</th>
            </tr>
            <tr>
                <td class="leftHead" rowspan = 7>1.<br><br><br><br><br><br>8<br><br></td>
                <td>(1)政府工作报告对食品安全工作有明确要求,得0.5分,否则不得分</td>
                <td>2017年省级政府工作报告</td>
                <td>
                    <form id= "uploadForm111" name="uploadForm111" enctype="multipart/form-data">  
                        <input name="messageContent" type="hidden"/>
                          <p><input type="file" name="file"/></p>
                          <p><div style="text-align:center"><input type="button" value="上传" onclick="doUpload($(this))" /> </div> </p>
                    </form> 
                    </td>
                <td><input type="number" width="98%"/></td>
                <td><input type="number" width="98%"/></td>
            </tr>
            <tr>
                <td>(2)组织制定并向社会公布食品安全重点工作安排。<br>
                    以省级政府(办公厅)名义印发,得1分,否则不得分★<br>
                    通过省级政府网站向社会公布,得0.5分,否则不得分★</td>
                <td>①省级政府(办公厅)印发的有关文件或网址链接<br>
                    ②公布有关文件的网址链接</td>
                <td><form id= "uploadForm112" name="uploadForm112" enctype="multipart/form-data">  
                        <input name="messageContent" type="hidden"/>
                          <p><input type="file" name="file"/></p>
                          <p><div style="text-align:center"><input type="button" value="上传" onclick="doUpload($(this))" /> </div> </p>
                    </form>  
                    </td>
                <td><input type="number" width="98%"/></td>
                <td><input type="number" width="98%"/></td>
            </tr>
            <tr>
                <td>(3)建立多部门参与的国家与省级食品安全“十三五”规划实施机制,明确任务分工,得1分,否则不得分★<br>
                    (减分项)未印发规划的,减1分★</td>
                <td>①省级政府(办公厅)、食品安全办或其他牵头实施部门印发的分工方案<br>
                    ②2016年底前未印发规划的,需提供规划(2016年已印发规划的,无需提供)</td>
                <td><form id= "uploadForm113" name="uploadForm113" enctype="multipart/form-data">  
                        <input name="messageContent" type="hidden"/>
                          <p><input type="file" name="file"/></p>
                          <p><div style="text-align:center"><input type="button" value="上传" onclick="doUpload($(this))" /> </div> </p>
                    </form>   
                    </td>
                <td><input type="number" width="98%"/></td>
                <td><input type="number" width="98%"/></td>
            </tr>
            <tr>
                <td>(4)省级政府制定或修订食品安全突发事件(事故)应急预案,得1分,否则不得分★<br>
                    在2017年开展了预案培训,且近三年至少开展一次预案演练,得0.5分,否则相应扣分</td>
                <td>①省级食品安全突发事件(事故)应急预案<br>
                    ②组织开展应急预案培训和演练的相关材料</td>
                 <td><form id= "uploadForm114" name="uploadForm114" enctype="multipart/form-data">  
                        <input name="messageContent" type="hidden"/>
                          <p><input type="file" name="file"/></p>
                          <p><div style="text-align:center"><input type="button" value="上传" onclick="doUpload($(this))" /> </div> </p>
                    </form> 
                    </td>
                <td><input type="number" width="98%"/></td>
                <td><input type="number" width="98%"/></td>
            </tr>
            <tr>
                <td>(5)采取有效措施推进食品安全示范城市创建工作,加强对创建城市的管理,得1分<br>
                    第一、二、三批创建城市未按要求落实创建工作部署的,每次扣0.2分,扣完1分为止<br>
                    第三批创建城市中期评估综合评分未达标的,每个城市扣0.5分,扣完1分为止<br>
                    (减分项)首批试点省份未提出确保第一批命名城市创建力度不减的、具体管用的保障措施,减0.5分</td>
                <td>①省级食品安全办相关工作年度总结<br>
                    ②无(根据国务院食品安全办掌握情况打分)<br>
                    ③无(根据第三方评估结果打分)<br>
                    ④保障措施相关材料(首批试点的4个省份)</td>
                 <td><form id= "uploadForm115" name="uploadForm115" enctype="multipart/form-data">  
                        <input name="messageContent" type="hidden"/>
                          <p><input type="file" name="file"/></p>
                          <p><div style="text-align:center"><input type="button" value="上传" onclick="doUpload($(this))" /> </div> </p>
                    </form> 
                    </td>
                <td><input type="number" width="98%"/></td>
                <td><input type="number" width="98%"/></td>
            </tr>
            <tr>
                <td>(6)按要求推进农产品质量安全县创建活动(对第一批质量安全县加强管理;第二批创建试点单位落实创建任务),相关部门积极配合办好“双安双创”成果展,得1分,否则相应扣分</td>
                <td>工作总结</td>
                <td><form id= "uploadForm116" name="uploadForm116" enctype="multipart/form-data">  
                        <input name="messageContent" type="hidden"/>
                          <p><input type="file" name="file"/></p>
                          <p><div style="text-align:center"><input type="button" value="上传" onclick="doUpload($(this))" /> </div> </p>
                    </form>  
                    </td>
                <td><input type="number" width="98%"/></td>
                <td><input type="number" width="98%"/></td>
            </tr>
            <tr>
                <td>(7)研究部署餐饮业质量安全提升工程,得1分,否则不得分<br>
                    制定提升餐饮业质量安全的具体措施并组织落实,得0.5分,否则相应扣分</td>
                <td>①省级政府或食品安全委员会会议纪要或相关文件<br>
                    ②省级政府或食品安全委员会制定的提升餐饮业质量安全的措施文件</td>
                 <td><form id= "uploadForm117" name="uploadForm117" enctype="multipart/form-data">  
                        <input name="messageContent" type="hidden"/>
                          <p><input type="file" name="file"/></p>
                          <p><div style="text-align:center"><input type="button" value="上传" onclick="doUpload($(this))" /> </div> </p>
                    </form> 
                    </td>
                <td><input type="number" width="98%"/></td>
                <td><input type="number" width="98%"/></td>
            </tr>
            <tr>
                <td class="leftHead" rowspan="3">2.<br><br><br><br><br><br><br><br><br>6<br><br></td>
                <td>(8)落实党政同责要求。<br>
                    省级政府主要负责同志召集会议(常务会议、省长办公会议等),协调解决食品安全重点难点问题,得1分,否则不得分<br>
                    (加分项)省级党委主要负责同志召集会议,协调解决食品安全重点难点问题,加1分<br>
                    (加分项)出台本省(区、市)落实党政同责要求的文件,加1分<br>
                    (加分项)省级政府高度重视食品安全工作,加强食品安全委员会建设,发挥食品安全委员会统一领导作用,视情加0.5分~1分</td>
                <td>①省级政府会议纪要或相关材料<br>
                    ②省级党委会议纪要或相关材料<br>
                    ③落实党政同责要求的文件<br>
                    ④省级政府食品安全委员会主任、副主任名单</td>
                 <td><form id= "uploadForm118" name="uploadForm118" enctype="multipart/form-data">  
                        <input name="messageContent" type="hidden"/>
                          <p><input type="file" name="file"/></p>
                          <p><div style="text-align:center"><input type="button" value="上传" onclick="doUpload($(this))" /> </div> </p>
                    </form>  
                    </td>
                <td><input type="number" width="98%"/></td>
                <td><input type="number" width="98%"/></td>
            </tr>
            <tr>
                <td>(9)对食品安全工作进行评议考核。<br>
                    对市级政府的食品安全工作进行评议考核,得2分,否则不得分<br>
                    将确保食品安全工作成效作为衡量党政领导班子和领导干部政绩的重要指标,所占权重在2%以上,得2分;<br>
                    权重在1%以上,得1分;<br>权重低于1%或者纳入但未明确权重的,得0.5分;<br>未纳入的,不得分(食品药品合并考核的,相应权重可计为食品安全工作考核的权重)<br>
                    对省级食品药品监管部门和其他有关部门的食品安全监督管理工作进行评议考核,得1分,否则不得分</td>
                <td>①对市级政府食品安全工作评议考核的方案<br>
                    ②省级党委政府绩效考核方案或其他综合评价方案<br>
                    ③对省级食品药品监管部门和其他有关部门食品安全工作评议考核的方案</td>
                 <td><form id= "uploadForm119" name="uploadForm119" enctype="multipart/form-data">  
                        <input name="messageContent" type="hidden"/>
                          <p><input type="file" name="file"/></p>
                          <p><div style="text-align:center"><input type="button" value="上传" onclick="doUpload($(this))" /> </div> </p>
                    </form>    
                    </td>
                <td><input type="number" width="98%"/></td>
                <td><input type="number" width="98%"/></td>
            </tr>
            <tr>
                <td>(10)(减分项)未就落实“综合执法的地方要把食品药品安全监管作为首要职责”提出具体措施的,视情减0.5分~1分</td>
                <td>①实行综合执法的地方及所出台措施一览表<br>
                    ②各地出台的措施文件</td>
                <td><form id= "uploadForm120" name="uploadForm120" enctype="multipart/form-data">  
                        <input name="messageContent" type="hidden"/>
                          <p><input type="file" name="file"/></p>
                          <p><div style="text-align:center"><input type="button" value="上传" onclick="doUpload($(this))" /> </div> </p>
                    </form> 
                    </td>
                <td><input type="number" width="98%"/></td>
                <td><input type="number" width="98%"/></td>
            </tr>
            <tr>
                <td class="leftHead" rowspan="2">3.<br><br><br><br><br><br><br><br><br>5<br><br></td>
                <td>(11)省、市、县级政府均成立食品安全委员会及办事机构的,得1.5分,否则不得分★<br>
                    (加分项)省级政府采取有效措施加强食品安全办建设,视情加0.1分~0.5分</td>
                <td>①成立食品安全委员会、明确办事机构汇总一览表(内容包括标题、文号、发文机关、发文日期)<br>
                    ②采取措施加强省级食品安全办建设的文件</td>
                 <td><form id= "uploadForm121" name="uploadForm121" enctype="multipart/form-data">  
                        <input name="messageContent" type="hidden"/>
                          <p><input type="file" name="file"/></p>
                          <p><div style="text-align:center"><input type="button" value="上传" onclick="doUpload($(this))" /> </div> </p>
                    </form>   
                    </td>
                <td><input type="number" width="98%"/></td>
                <td><input type="number" width="98%"/></td>
            </tr>
            <tr>
                <td>(12)省级公安机关明确机构和人员负责打击食品安全犯罪,得1.5分,否则不得分<br>
                    90%以上的市(地、州)公安机关明确机构和人员负责打击食品安全犯罪的,得2分;70%以上明确的,得1分;70%以下明确的,不得分
                </td>
                <td>①省级公安机关明确机构和人员的相关文件<br>
                    ②市级公安机关明确机构和人员的相关文件
                </td>
                <td><form id= "uploadForm122" name="uploadForm121" enctype="multipart/form-data">  
                        <input name="messageContent" type="hidden"/>
                          <p><input type="file" name="file"/></p>
                          <p><div style="text-align:center"><input type="button" value="上传" onclick="doUpload($(this))" /> </div> </p>
                    </form>  
                    </td>
                <td><input type="number" width="98%"/></td>
                <td><input type="number" width="98%"/></td>
            </tr>
        </table>
    </div>
    <div id="submit_click">  
        <a id="submitBtn" href="javascript:examSubmit();">提 交</a>
        </div>
    <script type="text/javascript" src="../lycaen/js/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="../lycaen/js/jquery/jquery-ui.min.js"></script>
    <script type="text/javascript" src="../lycaen/js/jquery/jquery-form.js"></script>
    
    <script>
        var doUpload = function(buttonSelf){
            
            buttonSelf.parent().parent()
             .ajaxSubmit(
                     {
         type : post,
         url : "../method2.action?ajax=11",

    //data:  //注意只要是写在表单里面的,都不需要加这个属性。在controller中可以根据@RequestParam String str获取到属性值。    
    contentType : "application/x-www-form-urlencoded; charset=utf-8",
    success: function(data) {
    //接受到的data还只是一个字符串,需要转成json对象
        var obj = JSON.parse(data);
        if(obj.flag==true){
        alert("上传成功");
        }else{
        alert("error");
        }
    },
    error: function (data)//服务器响应失败处理函数
    {
        alert("出错");
    }  
});
            //console.log("upload");
            //alert("上传完成!");
        };

        var examSubmit = function(){
            alert("提交完成");
        };
    </script>
</body>
</html>

5.控制器demo

 @RequestMapping("/method2")  
    @ResponseBody
    public String method2(@RequestParam MultipartFile file,
            @RequestParam String messageContent  ) { 
            //多个参数的话只要多个@RequestParam即可,注意参数名要和表单里面的属性名一致
     JSONObject json =new JSONObject();
     System.out.println(messageContent);
        String orgiginalFileName = "";  
        int m =new Random().nextInt(100)+10;
        System.out.println("m="+m);
        String path="D:/"+file.getOriginalFilename();
        try {  
            File newFile =new File(path);
            file.transferTo(newFile);

            String fileName = file.getName();  
            InputStream inputStream = file.getInputStream();  
            String content = file.getContentType();  
            orgiginalFileName = file.getOriginalFilename();  
           System.out.println("fileName: "+fileName+", inputStream: "+ inputStream  
                        +"\r\n content: "+content+", orgiginalFileName: ="+ orgiginalFileName  
                        +"\r\n projectName: ");      
        } catch (Exception e) {  
            e.printStackTrace();  
        }  
        json.put("flag", true);
        json.put("message", "success");
        System.out.println(json.toJSONString());
        return json.toJSONString();  
    }  
}

 

springMVC的多文件的异步上传实现