写在最前面
看过我之前博客的都知道,我最近在和小伙伴写一个挂在本地服务器(Tomcat)上的一个音乐论坛。我们在写文章编写页面时遇到了问题——好多现成的富文本编辑器都不支持图床（有些富文本编辑器则是直接将上传的图片变成base64编码格式，然后存储在数据库中。我不是特别喜欢这种方式，就想着弄一个局域网图床，在同一个局域网上的小伙伴就可以把文件上传到我的Apache服务器上面，我返回一个唯一的链接地址，这样就比较舒服了。）
准备工作
安装配置Apache
关于安装和配置Apache我再之前就写过一篇博客，点这里
前端页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/uploadimg.js" type="text/javascript"></script>
</head>
<body>
<form id="uploadForm" enctype="multipart/form-data">
<input id="file" type="file" name="file"/>
<button id="upload" type="button">upload</button>
</form>
<input type="text" value="" id="abc" style="width: 500px; height: 20px;"/>
<img src="http://localhost:8088/default-up.png" id="img" />
</body>
</html>
说明：id为img的<img>标签在将来就是要显示上传的图片的.
下面是原生JS部分:(不会用jQuery, ?)
window.onload=function () {
var a = document.getElementById('upload');
a.onclick=function () {
function success(text) {
var textarea = document.getElementById('abc');
var img = document.getElementById('img');
text = text.substring(1, text.length-1);
textarea.value = text;
img.style.width = '50%';
img.style.height = '50%';
img.src = text;
}
function fail(code) {
var textarea = document.getElementById('abc');
textarea.value = 'Error code: ' + code;
}
var request = new XMLHttpRequest(); // 新建XMLHttpRequest对象
request.onreadystatechange = function () { // 状态发生变化时，函数被回调
if (request.readyState === 4) { // 成功完成
// 判断响应结果:
if (request.status === 200) {
// 成功，通过responseText拿到响应的文本:
return success(request.responseText);
} else {
// 失败，根据响应码判断失败原因:
return fail(request.status);
}
} else {
// HTTP请求还在继续...
}
}
// 发送请求:
request.open('POST', '/imgUpload_war_exploded/RegistServlet');
var formData = new FormData();
formData.append('file', document.getElementById('file').files[0]);
request.send(formData);
};
};
后端servlet部分
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.util.ArrayList;
import java.util.List;
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 com.alibaba.fastjson.JSON;
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;
import com.github.util.UploadUtils;
/**
* 用户注册的Servlet
*/
@WebServlet("/RegistServlet")
public class RegistServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 数据的接收
// 文件上传基本操作:
try {
// 1.创建一个磁盘文件项工厂对象
DiskFileItemFactory diskFileItemFactory = new DiskFileItemFactory();
// 2.创建一个核心解析类
ServletFileUpload servletFileUpload = new ServletFileUpload(diskFileItemFactory);
// 3.解析request请求，返回的是List集合，List集合中存放的是FileItem对象
List<FileItem> list = servletFileUpload.parseRequest(request);
// 定义一个List集合，用于保存兴趣爱好数据:
List<String> hobbyList = new ArrayList<String>();
// 4.遍历集合，获得每个FileItem，判断是表单项还是文件上传项
String url = null;
for (FileItem fileItem : list) {
// 判断是表单项还是文件上传项
if(fileItem.isFormField()){
// 普通表单项:
// 接收表单项参数的值:
String name = fileItem.getFieldName(); // 获得表单项的name属性的值
String value = fileItem.getString("UTF-8");// 获得表单项的值
System.out.println(name+" "+value);
}else{
// 文件上传项:
// 文件上传功能：
// 获得文件上传的名称：
String fileName = fileItem.getName();
if(fileName !=null && !"".equals(fileName)){
// 通过工具类获得唯一文件名:
String uuidFileName = UploadUtils.getUUIDFileName(fileName);
// 获得文件上传的数据：
InputStream is = fileItem.getInputStream();
// 获得文件上传的路径(这个上传路径一定是你之前配置Apache时的路径):
String path = "/home/quanquan/www";
// 将输入流对接到输出流就可以了:
url = path+"/"+uuidFileName;
String src = "http://<你的ip地址加端口号>/"+uuidFileName;
System.out.println(src);
OutputStream os = new FileOutputStream(url);
int len = 0;
byte[] b = new byte[1024];
while((len = is.read(b))!=-1){
os.write(b, 0, len);
}
is.close();
os.close();
// 这里使用的alibaba的fastjson
JSON.writeJSONString(response.getWriter(), src);
}
}
}
} catch (FileUploadException e) {
e.printStackTrace();
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
说明:这里我用了一个工具类,所以我也把它贴出来吧:
工具类:
import java.util.UUID;
/**
* 文件上传的工具类
* @author 圈圈
*/
public class UploadUtils {
/**
* 生成唯一的文件名:
*/
public static String getUUIDFileName(String fileName){
// 将文件名的前面部分进行截取：xx.jpg ---> .jpg
int idx = fileName.lastIndexOf(".");
String extention = fileName.substring(idx);
String uuidFileName = UUID.randomUUID().toString().replace("-", "")+extention;
return uuidFileName;
}
}
说明:通过这个工具类就可以命名一个唯一的图片名称,防止上传同名图片导致错误.
最终效果:
写在最后
求路过大牛推荐好用的富文本编辑器.
再次感谢.
