SSM框架下,使用ajax请求上传文件(doc\docx\excel\图片等)

1.准备工作

1.1.添加上传必要jar包

<dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>2.4</version>
        </dependency>
        <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.3.1</version>
        </dependency>

1.2.springmvc xml配置

1 <!-- SpringMVC上传文件时，需要配置MultipartResolver处理器 -->
2     <bean id="multipartResolver"
3         class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
4         <property name="defaultEncoding" value="UTF-8" />
5         <!-- 指定所上传文件的总大小,单位字节。注意maxUploadSize属性的限制不是针对单个文件，而是所有文件的容量之和 -->
6         <property name="maxUploadSize" value="10240000" />
7     </bean>

2.前端页面代码

注意不论是上传图片还是 doc文档等,前端写法都一样,只是后端解析工具类不一样而已

  1 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2 <html>
  3 <head>
  4     <title>ajax请求上传文件</title>
  5     <script type="text/javascript" src="/static/js/jquery.min.js"></script>
  6 </head>
  7 <body>
  8 <%--页面按钮--%>
  9 <button id="addImport">导入</button>
 10 <%--隐藏的文件输入框--%>
 11 <input id="FileUpload" name="file" type="file" onchange="uploadWord()" style="display: none"/>
 12 </body>
 13 <script type="text/javascript">
 14     /**
 15      * 导入word文档入口
 16      */
 17     $('#addImport').click(function () {
 18         openFileDialogue();
 19     });
 20     /**
 21      * 打开上传文件对话框
 22      */
 23     function openFileDialogue() {
 24         var f = document.getElementById('FileUpload');
 25         f.click();
 26     }
 27 
 28     /**
 29      * 文件上传 前检查与确认
 30      */
 31     var msg;
 32     function uploadWord() {
 33         var fileObj = document.getElementById("FileUpload").files[0]; // js 获取文件对象
 34         var fileObjName = $("#FileUpload").val();
 35         if (typeof (fileObj) == "undefined" || fileObj.size <= 0) {
 36             alert("请选择要导入的文档?");
 37             return;
 38         }
 39         //判断是否为 doc 或 docx 文件
 40         var fileName = getFileName(fileObjName);
 41         var fileSuffix = getFileSuffix(fileObjName);
 42         if (fileSuffix != 'doc' && fileSuffix != 'docx') {
 43             alert("----请选择正确的文件格式---------");
 44             return;
 45         }
 46         //确认是否上传(略)
 47         //执行上传
 48         uploadWordDo(fileObj, fileName);
 49 
 50     }
 51 
 52     /**
 53      * 发送ajax请求 执行上传
 54      */
 55     function uploadWordDo(fileObj) {
 56         var formFile = new FormData();
 57         formFile.append("file", fileObj); //加入文件对象
 58         formFile.append("basePath", ""); //加入文件对象
 59         var data = formFile;
 60         $.ajax({
 61             url: "/upload/do",
 62             data: data,
 63             type: "Post",
 64             dataType: "json",
 65             async: true,
 66             cache: false,
 67             processData: false,//用于对data参数进行序列化处理 这里必须false
 68             contentType: false, //必须
 69             success: function (result) {
 70                 //成功提示
 71                 var code = result.code;
 72                 if (code == '0000') {
 73                     alert("--上传成功---");
 74                 } else {
 75                     alert("--失败---");
 76                 }
 77             }
 78         });
 79     }
 80     /**
 81      * 获取文件名
 82      * @param file
 83      * @returns {*}
 84      */
 85     function getFileName(file) {
 86         var arr = file.split('\\');
 87         return arr[arr.length - 1];
 88     }
 89 
 90     /**
 91      * 获取后缀
 92      * @param file
 93      * @returns {string}
 94      */
 95     function getFileSuffix(file) {
 96         var point = file.lastIndexOf(".");
 97         var type = file.substr(point + 1);
 98         return type;
 99     }
100 
101 </script>
102 </html>

View Code