寫在最前面
看過我之前博客的都知道,我最近在和小夥伴寫一個掛在本地服務器(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;
}
}
說明:通過這個工具類就可以命名一個唯一的圖片名稱,防止上傳同名圖片導致錯誤.
最終效果:
寫在最後
求路過大牛推薦好用的富文本編輯器.
再次感謝.