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配置
<!-- SpringMVC上传文件时，需要配置MultipartResolver处理器 -->
<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="defaultEncoding" value="UTF-8" />
<!-- 指定所上传文件的总大小,单位字节。注意maxUploadSize属性的限制不是针对单个文件，而是所有文件的容量之和 -->
<property name="maxUploadSize" value="10240000" />
</bean>
2.前端页面代码
注意不论是上传 图片还是 doc文档等,前端写法都一样,只是后端解析工具类不一样而已
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>ajax请求上传文件</title>
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
</head>
<body>
<%--页面按钮--%>
<button id="addImport">导入</button>
<%--隐藏的文件输入框--%>
<input id="FileUpload" name="file" type="file" onchange="uploadWord()" style="display: none"/>
</body>
<script type="text/javascript">
/**
* 导入word文档入口
*/
$('#addImport').click(function () {
openFileDialogue();
});
/**
* 打开上传文件对话框
*/
function openFileDialogue() {
var f = document.getElementById('FileUpload');
f.click();
} /**
* 文件上传 前检查与确认
*/
var msg;
function uploadWord() {
var fileObj = document.getElementById("FileUpload").files[0]; // js 获取文件对象
var fileObjName = $("#FileUpload").val();
if (typeof (fileObj) == "undefined" || fileObj.size <= 0) {
alert("请选择要导入的文档?");
return;
}
//判断是否为 doc 或 docx 文件
var fileName = getFileName(fileObjName);
var fileSuffix = getFileSuffix(fileObjName);
if (fileSuffix != 'doc' && fileSuffix != 'docx') {
alert("----请选择正确的文件格式---------");
return;
}
//确认是否上传(略)
//执行上传
uploadWordDo(fileObj, fileName); } /**
* 发送ajax请求 执行上传
*/
function uploadWordDo(fileObj) {
var formFile = new FormData();
formFile.append("file", fileObj); //加入文件对象
formFile.append("basePath", ""); //加入文件对象
var data = formFile;
$.ajax({
url: "/upload/do",
data: data,
type: "Post",
dataType: "json",
async: true,
cache: false,
processData: false,//用于对data参数进行序列化处理 这里必须false
contentType: false, //必须
success: function (result) {
//成功提示
var code = result.code;
if (code == '0000') {
alert("--上传成功---");
} else {
alert("--失败---");
}
}
});
}
/**
* 获取文件名
* @param file
* @returns {*}
*/
function getFileName(file) {
var arr = file.split('\\');
return arr[arr.length - 1];
} /**
* 获取后缀
* @param file
* @returns {string}
*/
function getFileSuffix(file) {
var point = file.lastIndexOf(".");
var type = file.substr(point + 1);
return type;
} </script>
</html>
3.后端处理
后端controller主要有两个方法,一个是获取上传页面的方法,另一个是处理上传的方法
package com.linrain.jcs.controller.bbsNews; import com.alibaba.fastjson.JSONObject;
import com.linrain.jcs.constant.CommonConstant;
import com.linrain.jcs.tool.DateUtil;
import com.linrain.jcs.tool.downPOI.baseDown.PoiUtil;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile; import javax.servlet.http.HttpServletRequest;
import java.io.InputStream; /**
* 文件上传
* Created by 姿势帝 on 2018/7/20.
* WX: 851298348
*/
@Controller
@RequestMapping(value = "/upload")
public class UploadController { /**
* 文件上传页面
*
* @return
*/
@RequestMapping(value = "/page")
public String page() { return "bbsNews/upload";
} /**
* 上传doc 或 docx
*
* @param file
* @return
*/
@RequestMapping(value = "/do", method = RequestMethod.POST)
@ResponseBody
public Object doUploadFile(@RequestParam("file") MultipartFile file, HttpServletRequest request, String basePath) {
JSONObject jsonObject = new JSONObject();
if (!file.isEmpty()) {
try {
InputStream inputStream = file.getInputStream();
String originalFilename = file.getOriginalFilename();
String fileName = DateUtil.getTimeString() + originalFilename;
//文件处理工具类(以后什么文件,这里就调用什么处理工具就可以了,这里是将上传的doc文件转变为html文件)
String con = PoiUtil.getHtml(inputStream, fileName);
jsonObject.put("content", con);
jsonObject.put("success", true);
jsonObject.put("code", CommonConstant.CODE_SUCCESS);
return jsonObject;
} catch (Exception e) {
e.printStackTrace(); }
}
jsonObject.put("success", false);
jsonObject.put("code", CommonConstant.CODE_IMPORT_FALSE);
jsonObject.put("msg", "文档导入失败!");
return jsonObject;
}
}
4.工具处理类
该工具类中主要处理 将doc或docx转变为--html文件
package com.linrain.jcs.tool.downPOI.baseDown; /**
* Created by Administrator on 2018/11/29.
*/ import com.linrain.jcs.tool.ConfigUtil;
import org.apache.poi.hwpf.HWPFDocument;
import org.apache.poi.hwpf.converter.PicturesManager;
import org.apache.poi.hwpf.converter.WordToHtmlConverter;
import org.apache.poi.hwpf.usermodel.PictureType;
import org.apache.poi.xwpf.converter.core.BasicURIResolver;
import org.apache.poi.xwpf.converter.core.FileImageExtractor;
import org.apache.poi.xwpf.converter.xhtml.XHTMLConverter;
import org.apache.poi.xwpf.converter.xhtml.XHTMLOptions;
import org.apache.poi.xwpf.usermodel.XWPFDocument;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.w3c.dom.Document; import javax.xml.parsers.DocumentBuilderFactory;
import javax.xml.transform.OutputKeys;
import javax.xml.transform.Transformer;
import javax.xml.transform.TransformerFactory;
import javax.xml.transform.dom.DOMSource;
import javax.xml.transform.stream.StreamResult;
import java.io.*;
import java.util.UUID; /**
* Created by 姿势帝 on 2018/11/299.
* 使用poi将word转为html文件，并从文件中读取内容
* wx:851298348
*/
public class PoiUtil {
private static final Logger log = LoggerFactory.getLogger(PoiUtil.class);
// 在html中图片保存的相对路径 static/images/upload
// private static String imagePath = "\\static\\images\\upload\\";
private static String imagePath = ConfigUtil.getTempImagePath();
private static String imagePathStr; //图片绝对地址
public static String rootPath;//项目跟路径
public static Long tempTime;//项目跟路径 /**
* 初始换图片地址
*/
static {
RegexAnswerUtil regexAnswerUtil = new RegexAnswerUtil();
rootPath = regexAnswerUtil.getRootPath();
imagePathStr = rootPath + imagePath;
log.info(" imagePathStr = " + imagePathStr);
tempTime = ConfigUtil.getTempTime();
} /**
* 更具文件名称判断是否超时
*/
public static boolean haveOvertime(String fileName) {
boolean flag = false;
if (fileName == null || fileName.length() < 14) {
return flag;
}
try {
String substring = fileName.substring(0, 13);
Long fileTime = Long.valueOf(substring);
Long nowTime = System.currentTimeMillis();
long l = nowTime - fileTime;
// long time = 2 * 60 * 60 * 1000; // 2个小时
//long time = 2 * 60 * 1000; // 2 分钟
if (l > tempTime) {
flag = true;
}
} catch (Exception e) {
e.printStackTrace();
}
return flag;
} /**
* 删除文件
*/
public static void del() {
File file = new File(imagePathStr);
delete(file);
} /**
* 根据地址删除文件
*
* @param path
*/
public static void deletePic(String path) {
File file = new File(path);
boolean delete = file.delete();
log.info(" delete=" + delete + "path=" + path);
} public static String getTimeUUID() {
String s = UUID.randomUUID().toString();
s = s.substring(0, 4);
return System.currentTimeMillis() + "-word" + s;
} /**
* 根据文件递归删除
*
* @param file
*/
public static void delete(File file) {
if (!file.exists()) return;
if (file.isFile() || file.list() == null) {
String path = file.getPath();
String name = file.getName();
if (haveOvertime(name)) {
boolean delete = file.delete();
log.info("delete=" + delete + " path=" + path);
} else {
log.info("该文不符合删除条件 path=" + path);
} } else {
File[] files = file.listFiles();
for (File a : files) {
delete(a);
}
boolean delete = file.delete();
log.info("删除文件夹 delete =" + delete + " path=" + file.getPath());
}
} /**
* @param inputStream word文件的File对象
* @param sourceFileName word文件名
* @return 转成的html字符串
*/
public static String getHtml(InputStream inputStream, String sourceFileName) throws Exception {
String content;
// 判断word文档类型，使用不同方法进行转换
if (sourceFileName.endsWith(".doc")) {
content = docToHtml(inputStream, sourceFileName);
} else if (sourceFileName.endsWith(".docx")) {
content = docxToHtml(inputStream, sourceFileName);
} else {
return "文件类型错误";
}
// 利用正则表达式过滤无用标签和属性
// content = RegexAnswerUtil.clear(content);
return content;
} /**
* 将doc文件转变为html
*
* @param fileInputStream
* @param sourceFileName
* @return
* @throws Exception
*/
public static String docToHtml(InputStream fileInputStream, String sourceFileName) throws Exception {
String targetFileName = imagePathStr + sourceFileName.substring(0, sourceFileName.lastIndexOf(".")) + ".html";
HWPFDocument wordDocument = new HWPFDocument(fileInputStream);
Document document = DocumentBuilderFactory.newInstance().newDocumentBuilder().newDocument();
WordToHtmlConverter wordToHtmlConverter = new WordToHtmlConverter(document);
// 保存图片，并返回图片的相对路径
wordToHtmlConverter.setPicturesManager(new PicturesManager() {
@Override
public String savePicture(byte[] content, PictureType pictureType, String name, float width, float height) {
name = getTimeUUID() + name;
try (FileOutputStream out = new FileOutputStream(new File(imagePathStr + name))) {
out.write(content);
} catch (Exception e) {
e.printStackTrace();
}
return imagePath + "\\" + name;
}
}); /*wordToHtmlConverter.setPicturesManager((content, pictureType, name, width, height) -> {
// name = DateUtil.getTimeString() + name;
name = getTimeUUID() + name;
try (FileOutputStream out = new FileOutputStream(new File(imagePathStr + name))) {
out.write(content);
} catch (Exception e) {
e.printStackTrace();
}
return imagePath + "\\" + name;
});*/
wordToHtmlConverter.processDocument(wordDocument);
Document htmlDocument = wordToHtmlConverter.getDocument();
DOMSource domSource = new DOMSource(htmlDocument);
StreamResult streamResult = new StreamResult(new File(targetFileName));
TransformerFactory tf = TransformerFactory.newInstance();
Transformer serializer = tf.newTransformer();
serializer.setOutputProperty(OutputKeys.ENCODING, "utf-8");
serializer.setOutputProperty(OutputKeys.INDENT, "yes");
serializer.setOutputProperty(OutputKeys.METHOD, "html");
serializer.transform(domSource, streamResult);
String content = splitContext(targetFileName);
// 删除生成的html文件
File file = new File(targetFileName);
// file.delete();
System.out.println("content= " + content);
return content;
} /**
* docx转换为html
*
* @param inputStream
* @param sourceFileName
* @return
* @throws Exception
*/
public static String docxToHtml(InputStream inputStream, String sourceFileName) throws Exception {
String targetFileName = imagePathStr + sourceFileName.substring(0, sourceFileName.lastIndexOf(".")) + ".html";
File target = new File(targetFileName);
target.getParentFile().mkdirs();
OutputStreamWriter outputStreamWriter = null;
try {
XWPFDocument document = new XWPFDocument(inputStream);
XHTMLOptions options = XHTMLOptions.create();
// 存放图片的文件夹
options.setExtractor(new FileImageExtractor(new File(imagePathStr)));
// html中图片的路径
options.URIResolver(new BasicURIResolver(imagePath));
outputStreamWriter = new OutputStreamWriter(new FileOutputStream(target), "utf-8");
XHTMLConverter xhtmlConverter = (XHTMLConverter) XHTMLConverter.getInstance();
xhtmlConverter.convert(document, outputStreamWriter, options);
} finally {
if (outputStreamWriter != null) {
outputStreamWriter.close();
}
}
String content = splitContext(targetFileName);
// 删除生成的html文件
File file = new File(targetFileName);
file.delete();
// System.out.println(" content docx= " + content);
return content;
} /**
* 读取转换得到的html文件，并过滤多余空行
*/
public static String splitContext(String filePath) {
File file = new File(filePath);
BufferedReader reader = null;
try {
InputStreamReader isr = new InputStreamReader(new FileInputStream(file), "UTF-8");
reader = new BufferedReader(isr);
StringBuilder sb = new StringBuilder();
String tempString = null;
// 一次读入一行，直到读入null为文件结束
while ((tempString = reader.readLine()) != null) {
sb.append(tempString);
if (!"".equals(tempString)) {
sb.append("\n");
}
}
reader.close();
String content = sb.toString().replaceAll("\\n+", "\n");
return content;
} catch (IOException e) {
e.printStackTrace();
} finally {
if (reader != null) {
try {
reader.close();
} catch (IOException e1) {
}
}
}
return "";
}
}
5.测试
5.1.页面效果
5.2.点击导入按钮
5.3.导入成功提示
注意:本文中主要讲解上传流程和逻辑,实际生产中需要根据产品要求给出友好提示,如文件类型限制,上传前提醒用户使用上传该文件等友好提示
完美!
SSM框架下,使用ajax请求上传文件(doc\docx\excel\图片等)的更多相关文章
- 使用FormData进行Ajax请求上传文件
Servlet3.0开始提供了一系列的注解来配置Servlet.Filter.Listener等等.这种方式可以极大的简化在开发中大量的xml的配置.从这个版本开始,web.xml可以不再需要,使用相 ...
- koa2：通过Ajax方式上传文件，使用FormData进行Ajax请求
koa2通过表单上传的网上很多,但通过Ajax方式上传文件,使用FormData进行Ajax请求,不好找. 参考了这个用base64上传图片的例子.https://github.com/Yuki-Mi ...
- 使用ajax请求上传多个或者多个附件
jsp页面 <%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE HTML> ...
- 基于Flask开发网站 -- 前端Ajax异步上传文件到后台
大家好,我是辰哥~ 辰哥最近利用空闲时间在写一个在线可视化平台,过程中也觉得一些技术还是比较有意思的,所以就以模块化的形式分享出来.如:从网页界面(前端)上传文件到服务器(后端). 放一下该模块的界面 ...
- SpringMVC实现PUT请求上传文件
在JQuery中,我们可以进行REST ful中delete和put的请求,但是在java EE标准中,默认只有在POST请求的时候,servlet 才会通过getparameter()方法取得请求体 ...
- ajax如何上传文件（整理）
ajax如何上传文件(整理) 一.总结 一句话总结:用FormData,FormData+ajax=异步上传二进制文件 <form enctype="multipart/form-da ...
- （23）ajax实现上传文件的功能
form表单上传文件 urls.py from django.conf.urls import urlfrom django.contrib import adminfrom app01 import ...
- ajax异步上传文件和表单同步上传文件 的区别
1. 用表单上传文件(以照片为例)-同步上传 html部分代码:这里请求地址index.php <!DOCTYPE html> <html lang="en"&g ...
- django中通过文件和Ajax来上传文件
一.通过form表单来上传文件 1.在html模板中 <form action="/index/" method="post" enctype=" ...
随机推荐
- SVG 学习<二>进阶 SVG世界，视野，视窗 stroke属性 svg分组
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- EXCEL workbook.saveas 函数详解
本问所有资料来自于 Excel2003 VBA帮助文件,张荣整理,适用于DELPHI,VB的高级语言操作Excel用 ExcelApplication.WorkBook.SaveAs(filename ...
- JavaScript Object 对象
Object 对象自身用处不大,不过在了解其他类之前,还是应该了解它.因为 ECMAScript 中的 Object 对象与 Java 中的 java.lang.Object 相似,ECMAScrip ...
- java se 随机数。生成
public class test { public static void main(String[] args) { getRandomNum1(); getRandomNum2(); getRa ...
- java 类拷贝
直接上代码:public class Demo { public static void main(String[] args) throws CloneNotSupportedException { ...
- 网页静态处理技术FreeMarker概述
FreeMarker 是一个用 Java 语言编写的模板引擎,它基于模板来生成文本输出.FreeMarker与 Web 容器无关,即在 Web 运行时,它并不知道 Servlet 或 HTTP.它不仅 ...
- python操作浏览器及截图小结
近期做网页自动化用到内容小结 1.打开浏览器1)打开默认配置的浏览器from selenium import webdriverdriver = webdriver.Firefox()"&q ...
- Oracle查询表结果添加到另一张表中
转自:https://blog.csdn.net/lx870576109/article/details/78336695 把每一个知识点进行积累:Oracle数据库中将查询一张表的结果添加到另一张表 ...
- centos 7 端口
查看端口是否占用 netstat -tlnp|grep 8080 查看已经开放的端口 firewall-cmd --zone=public --list-ports 增加开放端口 firewall-c ...
- 轻量级Java持久化框架，Hibernate完美助手，Minidao 1.6.2版本发布
Minidao 1.6.2 版本发布,轻量级Java持久化框架(Hibernate完美助手) Minidao产生初衷? 采用Hibernate的J2EE项目都有一个痛病,针对复杂业务SQL,hiber ...