jquery ajax+spring mvc上传文件

导入commons-fileupload-1.2.2.jar和commons-io-2.4.jar及spring的一些jar包

创建上传处理类UploadAction

package com.mysite.test;import java.io.File;import java.io.IOException;import java.io.PrintWriter;import java.util.Iterator;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.apache.commons.io.FileUtils;import org.slf4j.Logger;import org.slf4j.LoggerFactory;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.multipart.commons.CommonsMultipartResolver;@Controllerpublic class UploadAction {private static final Logger logger = LoggerFactory.getLogger(UploadAction.class);private final static int maxSize = 209715200;// 1024*1024*200 (200M)private String filePath="/uploads/";@RequestMapping(value = "/upload.do")public void fileUpload(HttpServletRequest request, HttpServletResponse response) {CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext());multipartResolver.setDefaultEncoding("UTF-8");if (multipartResolver.isMultipart(request)) {StringBuffer result = new StringBuffer();long startTime = System.currentTimeMillis(); // 获取开始时间MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;Iterator<String> ite = multiRequest.getFileNames();response.setCharacterEncoding("UTF-8");PrintWriter writer = null;try {writer = response.getWriter();while (ite.hasNext()) {MultipartFile file = multiRequest.getFile(ite.next());if (file.getSize() > maxSize) {result.append("文件[" + file.getOriginalFilename() + "]的大小超过限制(200M)").append("\r\n");writer.print(result);writer.flush();return;}if (file != null) {try {File serverPath = new File(filePath);if (!serverPath.exists()) {logger.warn("The path of server save file is not exists!");serverPath.mkdirs();}if (!serverPath.isDirectory()) {logger.warn("The path of server save file is not directory!");return;}if (!serverPath.canWrite() || !serverPath.canRead()) {logger.warn("The path of server save file cannot write or cannot read!");serverPath.setReadable(true);serverPath.setWritable(true);}File localFile = new File(filePath + file.getOriginalFilename());if (localFile.isFile() && localFile.exists()) {String name = localFile.getName();String oldName = name.substring(0, name.lastIndexOf(".")) + "_" + System.currentTimeMillis() + "_old" + name.substring(name.lastIndexOf("."));FileUtils.copyFile(localFile, new File(filePath + oldName));FileUtils.forceDelete(localFile);}file.transferTo(localFile); // 将上传文件写到服务器上指定的文件long endTime = System.currentTimeMillis(); // 获取结束时间logger.info("upload file success!expend {} ms", (endTime - startTime));String filePath = localFile.getAbsolutePath();logger.info("the file save to:{}", filePath);result.append("The file [").append(file.getOriginalFilename()).append("] upload success!\n");} catch (IOException e) {logger.error("has a error:{}", e);}}}writer.print(result);writer.flush();} catch (IOException e1) {e1.printStackTrace();} finally {if (writer != null) {writer.close();}}}}}

在springmvc-servlet.xml配置上传属性

<!-- 文件上传解析器 -->  <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">      <property name="defaultEncoding" value="utf-8"></property>      <property name="maxUploadSize" value="209715200"></property><!-- 最大上传文件大小 200M-->      <property name="maxInMemorySize" value="40960"></property>  </bean>

jsp导入js类库，因为样式是使用的easyui，所有需要引入easyui的js及样式

<script type="text/javascript" src="${base}js/jquery-1.8.3.min.js"></script><script type="text/javascript" src="${base}js/ajaxFileUpload.js"></script><script type="text/javascript" src="${base}js/jquery.easyui.min.js"></script>

导入样式文件

<link rel="stylesheet" type="text/css" href="${base}css/easyui.css"><link rel="stylesheet" type="text/css" href="${base}css/icon.css"><link rel="stylesheet" type="text/css" href="${base}css/color.css"><link rel="stylesheet" type="text/css" href="${base}css/demo.css">

css

.aitem {margin: 10px 0 5px 0;padding-bottom: 5px;border-bottom: 1px solid #eee;}.aitem .item {height: 40px;line-height: 40px;vertical-align: middle;}.aitem span {padding-right: 5px;}.aitem .title {width: 120px;}.aitem input[type="text"],input[type="password"],input[type="file"] {width: 200px;}

/*a  upload */.a-upload {text-decoration:none;    padding: 2px 10px;    height: 20px;    line-height: 20px;    position: relative;    cursor: pointer;    color: #777;    background: #eee;    border: 1px solid #ddd;    border-radius: 4px;    overflow: hidden;    display: inline-block;    *display: inline;    *zoom: 1}.a-upload  input {    position: absolute;    width:100%;    right: 0;    top: 0;    opacity: 0;    filter: alpha(opacity=0);    cursor: pointer}.a-upload:hover {color: #444;background: #eee;border-color: #ccc;text-decoration: none;}#fileName{color: #444;height: 24px;line-height: 24px;overflow: hidden;display: inline-block;*display: inline;*zoom: 1}

jsp

<div id="dlg" class="easyui-dialog" data-options="buttons:'#dlg-buttons',modal:true,closed:true" style="width:450px;height:330px;">    <form id="fm" name="fm" method="post" novalidate enctype="multipart/form-data">        <div id="uploadfile" class="aitem" style="display:block;">            <label><span style="color:red;">*</span>需更新的文件 (文件格式:zip,tar,jar,properties,bat,sh)</label>            <div class="item" style="height: 45px">                    <a href="javascript:;" class="a-upload">                        <input type="file" name="file" id="file" onchange="change(event);">选择文件                    </a>                    <span id="fileName"></span>            </div>            <label>文件最大不能超过200M</label>        </div>    </form></div><div id="dlg-buttons">    <button class="easyui-linkbutton c6" id="confirm" style="width:80px">确定</button>    <button class="easyui-linkbutton c5"  onclick="closeDialog('dlg')" style="width:80px">关闭窗口</button></div>

编写js函数

//上传文件，点击选择文件后获取文件名&文件大小function change(event){    event.stopPropagation();    var src=event.target || window.event.srcElement; //获取事件源，兼容chrome/IE    //alert( src.value );    //测试chrome浏览器、IE6，获取的文件名带有文件的path路径    //下面把路径截取为文件名    var path=src.value;    if(!path){        return false;    }    var filename=path.substring( path.lastIndexOf('\\')+1 );    //获取文件名的后缀名（文件格式）    var suffix=path.substring( path.lastIndexOf('.')+1 );    //zip,tar,jar,properties,bat,sh    if(suffix.toLowerCase()!="zip"&&suffix.toLowerCase()!="tar"&&suffix.toLowerCase()!="jar"&&suffix.toLowerCase()!="properties"        &&suffix.toLowerCase()!="bat"&&suffix.toLowerCase()!="sh"){        $.messager.alert("警告","只能上传以下后缀名的文件\nzip,tar,jar,properties,bat,sh");        //$("input[name='file']").val("");        src.value="";        if(src.id=='file')$("#fileName").empty();        else $("#selfFileName").empty();        return false;    }    var file_size = 0;    if ($.browser.msie) {        var img = new Image();        img.src = path;        file_size = img.fileSize;    } else {        file_size = src.files[0].size;    }    var size = file_size / 1024;    var maxSize = 200*1024;//200M    if (size > maxSize) {        $.messager.alert("警告","只能上传200M以下的文件");        src.value="";        if(src.id=='file')$("#fileName").empty();        else $("#selfFileName").empty();        return false;    }    if(src.id=='file')$("#fileName").empty().text(filename);    else $("#selfFileName").empty().text(filename);    return true;};//确认上传按钮绑定事件$("#confirm").bind("click", function(event) {    var file=$("input[name='file']").val();    $.messager.confirm("确认","你确定要这次操作吗？", function (r) {        if (r) {            if(!file){                $.messager.alert("警告","请选择需要上传的文件!","warning");                return false;            }            var command='1';            $.ajaxFileUpload({                  fileElementId: 'file',                  url: 'upload.do',                  data : {                    /*command : command*///传参数                },                dataType: 'text',                success: function (data, status) {                    if (status == "success") {                        $.messager.alert("",data);                    }                },                  error: function (XMLHttpRequest, status, error) {                      var msg = "服务器返回消息：" + XMLHttpRequest.responseText;                      $.messager.alert('提示',msg);                  },                  complete: function (obj) {                }             });        }    });});

co

cor