editor.md本地图片上传的实现

最新推荐文章于 2024-09-13 22:08:59 发布

weixin_43306301

最新推荐文章于 2024-09-13 22:08:59 发布

阅读量2.7k

点赞数 2

分类专栏：文件上传文章标签： java

本文链接：https://blog.csdn.net/weixin_43306301/article/details/99340752

版权

文件上传专栏收录该内容

2 篇文章 0 订阅

订阅专栏

editor.md本地图片上传图片

前端界面

<!DOCTYPE html>
<html>    
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--这个案例中关于bootstrap的相关组件不需要引入也可以-->
		<link rel="stylesheet" href="css/bootstrap.css" />
		<link rel="stylesheet" href="./css/bootstrap-theme.min.css">
		<link rel="stylesheet" href="./editor.md-master/css/editormd.css" />

		<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<script src="./editor.md-master/editormd.js"></script>

		<script type="text/javascript">
			var testEditor;

			$(function() {
				$(window).load(function() {
						testEditor = editormd("test-editormd", {
							//width: "90%",
							height: 740,
							path: 'editor.md-master/lib/',
							codeFold: true,
							saveHTMLToTextarea: true,
							searchReplace: true,
							htmlDecode: "style,script,iframe|on*",
							emoji: true,
							taskList: true,
							tocm: true, // Using [TOCM]
							tex: true, // 开启科学公式TeX语言支持，默认关闭
							flowChart: true, // 开启流程图支持，默认关闭
							sequenceDiagram: true, // 开启时序/序列图支持，默认关闭,
							imageUpload: true,
							imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
							imageUploadURL: "../examples/php/upload.php",
							onload: function() {
								console.log('onload', this);
							}
					});
				});

			});
		</script>
	</head>

	<body>
		<div class="container-fluid">
			<div id="test-editormd">	//这个div的id值为test-editormd，不能少
				<textarea></textarea>
			</div>    
		</div>
	</body>    
</html>

后台

使用commons-fileupload-1.3.jar和commons-io-2.0.1.jar进行文件上传

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.io.PrintWriter;
import java.io.Writer;
import java.util.List;
import java.util.Random;

import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;


@WebServlet("/Uploadimg")
public class Uploadimg extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doPost(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		// Create a factory for disk-based file items
		DiskFileItemFactory factory = new DiskFileItemFactory();

		// Set factory constraints
		factory.setSizeThreshold(1024 * 1024 * 10);
		ServletContext servletContext = this.getServletConfig().getServletContext();
		File repository = (File) servletContext.getAttribute("javax.servlet.context.tempdir");
		factory.setRepository(repository);

		// Create a new file upload handler
		ServletFileUpload upload = new ServletFileUpload(factory);

		// Set overall request size constraint
		upload.setSizeMax(1024 * 1024 * 30);

		// Parse the request
		List<FileItem> items;
		try {
			items = upload.parseRequest(request);
			for (FileItem item : items) {
				if (item.isFormField()) {
					String name = item.getFieldName();
					String value = item.getString();
					System.out.println(name + ":" + value);
				} else {
					String fieldName = item.getFieldName();
					String fileName = item.getName();
					String contentType = item.getContentType();
					boolean isInMemory = item.isInMemory();
					long sizeInBytes = item.getSize();
					/*
					 * System.out.println(fieldName); System.out.println(fileName);
					 * System.out.println(contentType); System.out.println(sizeInBytes);
					 */

					fileName = getFileName(fileName);
					System.out.println(fileName);
//					File f = new File(fileName);
					InputStream in = item.getInputStream();
					byte[] arr = new byte[1024];
					int len;

					OutputStream out = new FileOutputStream(fileName);
					while ((len = in.read(arr)) != -1) {
						out.write(arr, 0, len);
						System.out.println("hah");
					}
					in.close();
					out.close();
					PrintWriter writer = response.getWriter();
					String finalName = fileName.substring(getServletContext().getRealPath("img").length() + 1);//存储在服务器中的文件的名称
					//注意：这里的路径中的斜杠要用/，用\\是没有用的，在editor.md中识别不出（会识别为￥），路径为/项目名/存储路径或者是项目路径
					writer.write("{\"success\": 1, \"message\":\"upload success\",\"url\":" + "\"/dtzblog/img/" + finalName + "\"}");
					writer.flush();
				}
			}
		} catch (FileUploadException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
	}

	private String getFileName(String fileName) {
		Random random = new Random();
		int number = random.nextInt(1000);
		return getServletContext().getRealPath("img") + "\\" + System.currentTimeMillis() + number + fileName;
	}
}