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>

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 }

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             }
 73         } catch (Exception e) {
 74             e.printStackTrace();
 75         }
 76         return flag;
 77     }
 78
 79     /**
 80      * 删除文件
 81      */
 82     public static void del() {
 83         File file = new File(imagePathStr);
 84         delete(file);
 85     }
 86
 87     /**
 88      * 根据地址删除文件
 89      *
 90      * @param path
 91      */
 92     public static void deletePic(String path) {
 93         File file = new File(path);
 94         boolean delete = file.delete();
 95         log.info(" delete=" + delete + "path=" + path);
 96     }
 97
 98     public static String getTimeUUID() {
 99         String s = UUID.randomUUID().toString();
100         s = s.substring(0, 4);
101         return System.currentTimeMillis() + "-word" + s;
102     }
103
104     /**
105      * 根据文件递归删除
106      *
107      * @param file
108      */
109     public static void delete(File file) {
110         if (!file.exists()) return;
111         if (file.isFile() || file.list() == null) {
112             String path = file.getPath();
113             String name = file.getName();
114             if (haveOvertime(name)) {
115                 boolean delete = file.delete();
116                 log.info("delete=" + delete + " path=" + path);
117             } else {
118                 log.info("该文不符合删除条件 path=" + path);
119             }
120
121         } else {
122             File[] files = file.listFiles();
123             for (File a : files) {
124                 delete(a);
125             }
126             boolean delete = file.delete();
127             log.info("删除文件夹 delete =" + delete + "   path=" + file.getPath());
128         }
129     }
130
131     /**
132      * @param inputStream    word文件的File对象
133      * @param sourceFileName word文件名
134      * @return 转成的html字符串
135      */
136     public static String getHtml(InputStream inputStream, String sourceFileName) throws Exception {
137         String content;
138         // 判断word文档类型,使用不同方法进行转换
139         if (sourceFileName.endsWith(".doc")) {
140             content = docToHtml(inputStream, sourceFileName);
141         } else if (sourceFileName.endsWith(".docx")) {
142             content = docxToHtml(inputStream, sourceFileName);
143         } else {
144             return "文件类型错误";
145         }
146         // 利用正则表达式过滤无用标签和属性
147         //  content = RegexAnswerUtil.clear(content);
148         return content;
149     }
150
151
152     /**
153      * 将doc文件转变为html
154      *
155      * @param fileInputStream
156      * @param sourceFileName
157      * @return
158      * @throws Exception
159      */
160     public static String docToHtml(InputStream fileInputStream, String sourceFileName) throws Exception {
161         String targetFileName = imagePathStr + sourceFileName.substring(0, sourceFileName.lastIndexOf(".")) + ".html";
162         HWPFDocument wordDocument = new HWPFDocument(fileInputStream);
163         Document document = DocumentBuilderFactory.newInstance().newDocumentBuilder().newDocument();
164         WordToHtmlConverter wordToHtmlConverter = new WordToHtmlConverter(document);
165         // 保存图片,并返回图片的相对路径
166         wordToHtmlConverter.setPicturesManager(new PicturesManager() {
167             @Override
168             public String savePicture(byte[] content, PictureType pictureType, String name, float width, float height) {
169                 name = getTimeUUID() + name;
170                 try (FileOutputStream out = new FileOutputStream(new File(imagePathStr + name))) {
171                     out.write(content);
172                 } catch (Exception e) {
173                     e.printStackTrace();
174                 }
175                 return imagePath + "\\" + name;
176             }
177         });
178
179         /*wordToHtmlConverter.setPicturesManager((content, pictureType, name, width, height) -> {
180             // name = DateUtil.getTimeString() + name;
181             name = getTimeUUID() + name;
182             try (FileOutputStream out = new FileOutputStream(new File(imagePathStr + name))) {
183                 out.write(content);
184             } catch (Exception e) {
185                 e.printStackTrace();
186             }
187             return imagePath + "\\" + name;
188         });*/
189         wordToHtmlConverter.processDocument(wordDocument);
190         Document htmlDocument = wordToHtmlConverter.getDocument();
191         DOMSource domSource = new DOMSource(htmlDocument);
192         StreamResult streamResult = new StreamResult(new File(targetFileName));
193         TransformerFactory tf = TransformerFactory.newInstance();
194         Transformer serializer = tf.newTransformer();
195         serializer.setOutputProperty(OutputKeys.ENCODING, "utf-8");
196         serializer.setOutputProperty(OutputKeys.INDENT, "yes");
197         serializer.setOutputProperty(OutputKeys.METHOD, "html");
198         serializer.transform(domSource, streamResult);
199         String content = splitContext(targetFileName);
200         // 删除生成的html文件
201         File file = new File(targetFileName);
202         // file.delete();
203         System.out.println("content= " + content);
204         return content;
205     }
206
207     /**
208      * docx转换为html
209      *
210      * @param inputStream
211      * @param sourceFileName
212      * @return
213      * @throws Exception
214      */
215     public static String docxToHtml(InputStream inputStream, String sourceFileName) throws Exception {
216         String targetFileName = imagePathStr + sourceFileName.substring(0, sourceFileName.lastIndexOf(".")) + ".html";
217         File target = new File(targetFileName);
218         target.getParentFile().mkdirs();
219         OutputStreamWriter outputStreamWriter = null;
220         try {
221             XWPFDocument document = new XWPFDocument(inputStream);
222             XHTMLOptions options = XHTMLOptions.create();
223             // 存放图片的文件夹
224             options.setExtractor(new FileImageExtractor(new File(imagePathStr)));
225             // html中图片的路径
226             options.URIResolver(new BasicURIResolver(imagePath));
227             outputStreamWriter = new OutputStreamWriter(new FileOutputStream(target), "utf-8");
228             XHTMLConverter xhtmlConverter = (XHTMLConverter) XHTMLConverter.getInstance();
229             xhtmlConverter.convert(document, outputStreamWriter, options);
230         } finally {
231             if (outputStreamWriter != null) {
232                 outputStreamWriter.close();
233             }
234         }
235         String content = splitContext(targetFileName);
236         // 删除生成的html文件
237         File file = new File(targetFileName);
238         file.delete();
239         // System.out.println(" content docx= " + content);
240         return content;
241     }
242
243     /**
244      * 读取转换得到的html文件,并过滤多余空行
245      */
246     public static String splitContext(String filePath) {
247         File file = new File(filePath);
248         BufferedReader reader = null;
249         try {
250             InputStreamReader isr = new InputStreamReader(new FileInputStream(file), "UTF-8");
251             reader = new BufferedReader(isr);
252             StringBuilder sb = new StringBuilder();
253             String tempString = null;
254             // 一次读入一行,直到读入null为文件结束
255             while ((tempString = reader.readLine()) != null) {
256                 sb.append(tempString);
257                 if (!"".equals(tempString)) {
258                     sb.append("\n");
259                 }
260             }
261             reader.close();
262             String content = sb.toString().replaceAll("\\n+", "\n");
263             return content;
264         } catch (IOException e) {
265             e.printStackTrace();
266         } finally {
267             if (reader != null) {
268                 try {
269                     reader.close();
270                 } catch (IOException e1) {
271                 }
272             }
273         }
274         return "";
275     }
276 }

5.测试

5.1.页面效果

5.2.点击导入按钮

5.3.导入成功提示

 注意:本文中主要讲解上传流程和逻辑,实际生产中需要根据产品要求给出友好提示,如文件类型限制,上传前提醒用户使用上传该文件等友好提示

完美!

原文地址:https://www.cnblogs.com/newAndHui/p/10318769.html

时间: 2024-10-28 00:49:17

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

使用FormData进行Ajax请求上传文件到controller层的实现

需求背景: 页面上传一个文件到controller层,然后后台对文件进行处理.文件类型不限. 第一种:单纯的上传文件 页面功能展现: 第一步:首先需要两个jar commons-fileupload-1.3.2.jarcommons-io-2.4.jar 版本不限: pom文件中相应两个jar: [html] view plain copy print? <dependency> <groupId>commons-io</groupId> <artifactId&

django中通过文件和Ajax来上传文件

一.通过form表单来上传文件 1.在html模板中 <form action="/index/" method="post" enctype="multipart/form-data">#在form属性中写入enctype="multipart/form-data" 这样form表单才能支持数据文件的提交 {% csrf_token %} 头像<input type="file" nam

关于ajax分段上传文件实例~

本来打算写的勤快一点的,谁知道最近好忙啊,忙着应聘的事情,这里突然想提一下自己的历程 自己现在是一只大三狗,高中三年是玩过去了,上了一所省内普通的不能再普通的二本.不过在大学里还算的上勤奋,大一上在学生会搅搅水,大一下就开始在学校网络中心里面干活,网络维护是工作,编程是兴趣,基本上每天网络中心寝室两点一线,所以说还算得上勤奋.不过现在我自己算是明白,很多事情不是勤奋就好了的,方法不对,真的是事倍功半.自己之前学习东西都是瞎倒腾,看书,看视频,记笔记,写demo.看起来稀疏平常,但是自己缺点在于太

Ajax方式上传文件

用到两个对象 第一个对象:FormData 第二个对象:XMLHttpRequest 目前新版的Firefox 与 Chrome 等支持HTML5的浏览器完美的支持这两个对象,但IE9尚未支持 FormData 对象,还在用IE6 ? 只能仰天长叹.... 有了这两个对象,我们可以真正的实现Ajax方式上传文件. 示例代码: <!DOCTYPE html> <html> <head> <title>Html5 Ajax 上传文件</title>

jquery ajax实现上传文件代码,带进度条

原文:jquery ajax实现上传文件代码,带进度条 源代码下载地址:http://www.zuidaima.com/share/1550463291116544.htm ajax上传文件代码,带进度条的. 首页 http://localhost:端口/项目名/common/test.htm 上传中 标签: jquery ajax 上传 进度条话题: Web开发 前端技术 jquery ajax实现上传文件代码,带进度条

ajax jquery 上传文件

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ include file="/WEB-INF/jsp/commons/includes.jsp"%> <html> <head> <title>${systemName }</title> <style t

解决ajax异步上传文件的问题

HTML: <form id="avater" name="formlist"> {{ csrf_field() }} <ul class="list-group container" style="width:50%"> <li class="list-group-item list" style="border-radius: 5px"> <

通过Ajax方式上传文件,使用FormData进行Ajax请求

通过传统的form表单提交的方式上传文件: 1 2 3 4 5 6 7 8 9 <form id= "uploadForm" action= "http://localhost:8080/cfJAX_RS/rest/file/upload" method= "post" enctype ="multipart/form-data">       <h1 >测试通过Rest接口上传文件 </h1&g

H5 通过Ajax方式上传文件,使用FormData进行Ajax请求

通过传统的form表单提交的方式上传文件: Html代码   <form id= "uploadForm" action= "http://localhost:8080/cfJAX_RS/rest/file/upload" method= "post" enctype ="multipart/form-data"> <h1 >测试通过Rest接口上传文件 </h1> <p >指定