SSM框架下,使用ajax请求上传文件(docdocxexcel图片等)

Posted 2021-02-05 姿势帝

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了SSM框架下,使用ajax请求上传文件(docdocxexcel图片等)相关的知识，希望对你有一定的参考价值。

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

3.后端处理

后端controller主要有两个方法,一个是获取上传页面的方法,另一个是处理上传的方法

 1 package com.linrain.jcs.controller.bbsNews;
 2 
 3 import com.alibaba.fastjson.JSONObject;
 4 import com.linrain.jcs.constant.CommonConstant;
 5 import com.linrain.jcs.tool.DateUtil;
 6 import com.linrain.jcs.tool.downPOI.baseDown.PoiUtil;
 7 import org.springframework.stereotype.Controller;
 8 import org.springframework.web.bind.annotation.RequestMapping;
 9 import org.springframework.web.bind.annotation.RequestMethod;
10 import org.springframework.web.bind.annotation.RequestParam;
11 import org.springframework.web.bind.annotation.ResponseBody;
12 import org.springframework.web.multipart.MultipartFile;
13 
14 import javax.servlet.http.HttpServletRequest;
15 import java.io.InputStream;
16 
17 /**
18  * 文件上传
19  * Created by 姿势帝 on 2018/7/20.
20  * WX: 851298348
21  */
22 @Controller
23 @RequestMapping(value = "/upload")
24 public class UploadController {
25 
26     /**
27      * 文件上传页面
28      *
29      * @return
30      */
31     @RequestMapping(value = "/page")
32     public String page() {
33 
34         return "bbsNews/upload";
35     }
36 
37     /**
38      * 上传doc 或 docx
39      *
40      * @param file
41      * @return
42      */
43     @RequestMapping(value = "/do", method = RequestMethod.POST)
44     @ResponseBody
45     public Object doUploadFile(@RequestParam("file") MultipartFile file, HttpServletRequest request, String basePath) {
46         JSONObject jsonObject = new JSONObject();
47         if (!file.isEmpty()) {
48             try {
49                 InputStream inputStream = file.getInputStream();
50                 String originalFilename = file.getOriginalFilename();
51                 String fileName = DateUtil.getTimeString() + originalFilename;
52                 //文件处理工具类(以后什么文件,这里就调用什么处理工具就可以了,这里是将上传的doc文件转变为html文件)
53                 String con = PoiUtil.getHtml(inputStream, fileName);
54                 jsonObject.put("content", con);
55                 jsonObject.put("success", true);
56                 jsonObject.put("code", CommonConstant.CODE_SUCCESS);
57                 return jsonObject;
58             } catch (Exception e) {
59                 e.printStackTrace();
60 
61             }
62         }
63         jsonObject.put("success", false);
64         jsonObject.put("code", CommonConstant.CODE_IMPORT_FALSE);
65         jsonObject.put("msg", "文档导入失败!");
66         return jsonObject;
67     }
68 }

View Code

4.工具处理类

该工具类中主要处理将doc或docx转变为--html文件

  1 package com.linrain.jcs.tool.downPOI.baseDown;
  2 
  3 /**
  4  * Created by Administrator on 2018/11/29.
  5  */
  6 
  7 import com.linrain.jcs.tool.ConfigUtil;
  8 import org.apache.poi.hwpf.HWPFDocument;
  9 import org.apache.poi.hwpf.converter.PicturesManager;
 10 import org.apache.poi.hwpf.converter.WordToHtmlConverter;
 11 import org.apache.poi.hwpf.usermodel.PictureType;
 12 import org.apache.poi.xwpf.converter.core.BasicURIResolver;
 13 import org.apache.poi.xwpf.converter.core.FileImageExtractor;
 14 import org.apache.poi.xwpf.converter.xhtml.XHTMLConverter;
 15 import org.apache.poi.xwpf.converter.xhtml.XHTMLOptions;
 16 import org.apache.poi.xwpf.usermodel.XWPFDocument;
 17 import org.slf4j.Logger;
 18 import org.slf4j.LoggerFactory;
 19 import org.w3c.dom.Document;
 20 
 21 import javax.xml.parsers.DocumentBuilderFactory;
 22 import javax.xml.transform.OutputKeys;
 23 import javax.xml.transform.Transformer;
 24 import javax.xml.transform.TransformerFactory;
 25 import javax.xml.transform.dom.DOMSource;
 26 import javax.xml.transform.stream.StreamResult;
 27 import java.io.*;
 28 import java.util.UUID;
 29 
 30 /**
 31  * Created by 姿势帝 on 2018/11/299.
 32  * 使用poi将word转为html文件，并从文件中读取内容
 33  * wx:851298348
 34  */
 35 public class PoiUtil {
 36     private static final Logger log = LoggerFactory.getLogger(PoiUtil.class);
 37     // 在html中图片保存的相对路径  static/images/upload
 38     //  private static String imagePath = "\\\\static\\\\images\\\\upload\\\\";
 39     private static String imagePath = ConfigUtil.getTempImagePath();
 40     private static String imagePathStr; //图片绝对地址
 41     public static String rootPath;//项目跟路径
 42     public static Long tempTime;//项目跟路径
 43 
 44     /**
 45      * 初始换图片地址
 46      */
 47     static {
 48         RegexAnswerUtil regexAnswerUtil = new RegexAnswerUtil();
 49         rootPath = regexAnswerUtil.getRootPath();
 50         imagePathStr = rootPath + imagePath;
 51         log.info("  imagePathStr = " + imagePathStr);
 52         tempTime = ConfigUtil.getTempTime();
 53     }
 54 
 55     /**
 56      * 更具文件名称判断是否超时
 57      */
 58     public static boolean haveOvertime(String fileName) {
 59         boolean flag = false;
 60         if (fileName == null || fileName.length() < 14) {
 61             return flag;
 62         }
 63         try {
 64             String substring = fileName.substring(0, 13);
 65             Long fileTime = Long.valueOf(substring);
 66             Long nowTime = System.currentTimeMillis();
 67             long l = nowTime - fileTime;
 68             // long time = 2 * 60 * 60 * 1000; // 2个小时
 69             //long time = 2 * 60 * 1000; // 2 分钟
 70             if (l > tempTime) {
 71                 flag = true;
 72 以上是关于SSM框架下,使用ajax请求上传文件(docdocxexcel图片等)的主要内容，如果未能解决你的问题，请参考以下文章 
 ssm框架下的文件上传和文件下载
 ssm框架下文件上传
 ssm 框架下的上传文件功能
 ssm框架 怎么用ajax查询从数据库读取数据 返回json格式
 ntko的office控件,ssm框架下上传文件到数据库和页面的回显
 Shiro + SSM（框架） + Freemarker（jsp）