jquery+springMVC实现文件上传

此文章是基于　　搭建Jquery+SpringMVC+Spring+Hibernate+MySQL平台

 

一. jar包介绍

　　1. commons-fileupload-1.3.1.jar

 

二. 相关程序代码

　　1. applicationContext.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"   
    xmlns:tx="http://www.springframework.org/schema/tx" xmlns:aop="http://www.springframework.org/schema/aop"
    xmlns:context="http://www.springframework.org/schema/context" 
    xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.3.xsd
        http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-4.3.xsd
        http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.3.xsd
        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.3.xsd">     
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver" >
        <property name="maxUploadSize">
            <value>52428800</value>
        </property>
        <property name="maxInMemorySize">
            <value>2048</value>
        </property>
    </bean>
    
</beans>
View Code

　　

　　2. TestController.java

package com.ims.web.controller;

import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import org.springframework.web.servlet.ModelAndView;

import com.alibaba.fastjson.JSON;
import com.ims.common.FileUtil;

@Controller
@RequestMapping("test")
public class TestController extends BaseController{
    
    @RequestMapping("view")
    public ModelAndView test(){
        ModelAndView view = new ModelAndView("test.jsp");
        return view;
    }
    
    @RequestMapping("fileUpload")
    public void fileUpload(MultipartHttpServletRequest multipartRequest){
        Map<String, Object> result = new HashMap<String, Object>();
        try{
            MultipartFile uploadFile = multipartRequest.getFile("uploadFile");
            String fileName = uploadFile.getOriginalFilename();
            String uploadPath = System.getProperty("webapp.root")+"uploadFile\\";
            FileUtil.saveFileFromInputStream(uploadFile.getInputStream(), 
                    uploadPath+fileName);
        } catch (IOException e) {
            result.put("status", STATUS_ERROR);
            result.put("message", "文件上传失败");
        }    
        ajax(JSON.toJSONString(result),"text/html");
    }
    
}
View Code

　　

　　3. fileUpload.jsp

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>测试</title>
    <%@ include file="/common/basePath.jsp"%>
 </head>
 <body>
 ~~~~~~~~~~~~~~~~~~~~~~文件上传~~~~~~~~~~~~~~~~~~~~~~~~
 <br><br>
   文件选择：<input type="file" id="uploadFile" style="width: 350px;"/>
 <br><br>
 <button type="button" onclick="upload();">上传</button>
 <br><br><br>
 <script type="text/javascript" src="content/js/jquery/jquery-1.8.1.min.js"></script>
 <script type="text/javascript" src="content/js/jquery-plugin/fileUpload/jquery.ajaxFileUpload.js"></script>
 <script type="text/javascript">
    
    function upload(){
        $.ajaxFileUpload({  
            url:rootPath+"/test/file!upload.do",
            secureuri:false,
            fileElementId: ['uploadFile'], 
            dataType: 'json',
            success: function (data){                              
            },
            error: function(data){
            }
        });
    }

 </script>
 </body>
</html>
View Code


三. 测试

　　访问：http://localhost:8080/ims/test/fileUpload.do

　　选择一文件，点上传，则在  %工程发布目录%\WebContent\uploadFile  下可看到上传的文件

posted on 2017-03-17 15:03  大饼酥  阅读(611)  评论(0)  编辑  收藏  举报

导航