在前端頁面上傳文件到服務器方法示例
1.選擇圖片
<div class="item1 update_pic" >
<span>摘要圖片：</span>
<img src="${pageContext.request.contextPath}/upload/<s:property value="article_pic" />" id="imageview" class="item1_img" >
<label for="fileupload" id="label_file">上傳文件</label>
<input type="file" name="upload" id="fileupload"/>
</div>
/*原理是把本地圖片路徑："D(盤符):/image/..."轉爲"http://..."格式路徑來進行顯示圖片*/
$("#fileupload").change(function() {
var $file = $(this);
var objUrl = $file[0].files[0];
//獲得一個http格式的url路徑:mozilla(firefox)||webkit or chrome
var windowURL = window.URL || window.webkitURL;
//createObjectURL創建一個指向該參數對象(圖片)的URL
var dataURL;
dataURL = windowURL.createObjectURL(objUrl);
$("#imageview").attr("src",dataURL);
console.log($('#imageview').attr('style'));
if($('#imageview').attr('style') === 'display: none;'){
$('#imageview').attr('style','inline');
$('#imageview').width("300px");
$('#imageview').height("200px");
$('.update_pic').attr('style', 'margin-bottom: 80px;');
}
});
2.上傳圖片
1).form表單enctype設置爲multipart/form-data.
<!--在from中添加的屬性enctype="multipart/form-data"-->
<form id="blog_form" action="${ctx}/article_update.action" method=post enctype="multipart/form-data">
<div class="edit_content">
<div class="item1">
<div>
<span>文章標題：</span>
<input type="text" class="am-form-field" name="article_title" style="width: 300px"
value="<s:property value="article_title" />"
>
</div>
</div>
<input type="text" name="article_desc" id="article_desc" style="display: none;">
<div class="item1">
<span>所屬分類：</span>
<select id="category_select" name="category.parentid" style="width: 150px">
</select>
<select id="skill_select" name="category.cid" style="width: 150px">
</select>
</div>
<div class="item1 update_pic" >
<span>摘要圖片：</span>
<img src="${pageContext.request.contextPath}/upload/<s:property value="article_pic" />" id="imageview" class="item1_img" >
<label for="fileupload" id="label_file">上傳文件</label>
<input type="file" name="upload" id="fileupload"/>
</div>
<div id="editor" name="article_content" style="width:900px;height:400px;"></div>
<input type="hidden" id="resContent" value="<s:property value="article_content"/>">
<input type="hidden" name="article_id" value="<s:property value="article_id"/>">
<input type="hidden" name="article_pic" value="<s:property value="article_pic"/>">
<button class="am-btn am-btn-default" type="button" id="send" style="margin-top: 10px;">
修改</button>
</div>
</form>
2).服務器提供屬性接收
3).上傳文件處理
/**
* 文件上傳提供的三個屬性:
*/
@Setter
private String uploadFileName; // 文件名稱
@Setter
private File upload; // 上傳文件（文件路徑）
@Setter
private String uploadContentType; // 文件類型
public String add() throws IOException {
System.out.println("add-web層");
//上傳圖片
if(upload != null){
//上傳文件
//隨機生成文件名稱
//1.獲取文件的擴展名
int index = uploadFileName.lastIndexOf(".");
String etx = uploadFileName.substring(index);
//2.隨機生成文件名 拼接擴展名
String uuid = UUID.randomUUID().toString();/*生成的文件名是帶“-”的，所以要去掉*/
String uuidFileName = uuid.replace("-", "") + etx;
//確定上傳的路徑
String path = ServletActionContext.getServletContext().getRealPath("/upload");
File file = new File(path);
if(!file.exists()){
file.mkdirs();
}
//拼接新的文件路徑
File desFile = new File(path + "/" + uuidFileName);
//文件上傳
FileUtils.copyFile(upload,desFile);
//設置圖片
article.setArticle_pic(uuidFileName);
}
//設置當前時間
article.setArticle_time(new Date().getTime());
System.out.println(article);
//調用業務層保存到數據庫當中
articleService.save(article);
return "listres";
}
3.集成富文本編輯器
umedit下載地址
https://ueditor.baidu.com/website/download.html
添加到頁面添加
1).引入js
<script type="text/javascript" charset="utf-8" src="${ctx }/js/umedit/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="${ctx }/js/umedit/ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="${ctx }/js/umedit/lang/zh-cn/zh-cn.js"></script>
2).在頁面當中提供div標籤供顯示內容
<div id="editor" name="article_content" style="width:900px;height:400px;"></div>
3).在js當中初始化富文本編輯器
var ue = UE.getEditor('editor');
4.富文本編輯器文件上傳
1).添加uedit相關jar包
2).配置過濾器
package com.helong.web.filter;
import org.apache.struts2.dispatcher.filter.StrutsPrepareAndExecuteFilter;
import javax.servlet.FilterChain;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
public class MyFilter extends StrutsPrepareAndExecuteFilter {
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
//獲取當前請求
HttpServletRequest request = (HttpServletRequest) req;
//獲取請求的地址來進行判斷
String requestURI = request.getRequestURI();
if(requestURI.contains("js/umedit/jsp/controller.jsp")){
//放行
chain.doFilter(req,res);
}else{
super.doFilter(req,res,chain);
}
}
}
3).json文件配置獲取圖片路徑
/* 前後端通信相關的配置,註釋只允許使用多行方式 */
{
/* 上傳圖片配置項 */
"imageActionName": "uploadimage", /* 執行上傳圖片的action名稱 */
"imageFieldName": "upfile", /* 提交的圖片表單名稱 */
"imageMaxSize": 2048000, /* 上傳大小限制，單位B */
"imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上傳圖片格式顯示 */
"imageCompressEnable": true, /* 是否壓縮圖片,默認是true */
"imageCompressBorder": 1600, /* 圖片壓縮最長邊限制 */
"imageInsertAlign": "none", /* 插入的圖片浮動方式 */
"imageUrlPrefix": "http://localhost:8080/", /* 圖片訪問路徑前綴 */
"imagePathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,可以自定義保存路徑和文件名格式 */
/* {filename} 會替換成原文件名,配置這項需要注意中文亂碼問題 */
/* {rand:6} 會替換成隨機數,後面的數字是隨機數的位數 */
/* {time} 會替換成時間戳 */
/* {yyyy} 會替換成四位年份 */
/* {yy} 會替換成兩位年份 */
/* {mm} 會替換成兩位月份 */
/* {dd} 會替換成兩位日期 */
/* {hh} 會替換成兩位小時 */
/* {ii} 會替換成兩位分鐘 */
/* {ss} 會替換成兩位秒 */
/* 非法字符 \ : * ? " < > | */
/* 具請體看線上文檔: fex.baidu.com/ueditor/#use-format_upload_filename */
/* 塗鴉圖片上傳配置項 */
"scrawlActionName": "uploadscrawl", /* 執行上傳塗鴉的action名稱 */
"scrawlFieldName": "upfile", /* 提交的圖片表單名稱 */
"scrawlPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,可以自定義保存路徑和文件名格式 */
"scrawlMaxSize": 2048000, /* 上傳大小限制，單位B */
"scrawlUrlPrefix": "", /* 圖片訪問路徑前綴 */
"scrawlInsertAlign": "none",
/* 截圖工具上傳 */
"snapscreenActionName": "uploadimage", /* 執行上傳截圖的action名稱 */
"snapscreenPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,可以自定義保存路徑和文件名格式 */
"snapscreenUrlPrefix": "", /* 圖片訪問路徑前綴 */
"snapscreenInsertAlign": "none", /* 插入的圖片浮動方式 */
/* 抓取遠程圖片配置 */
"catcherLocalDomain": ["127.0.0.1", "localhost", "img.baidu.com"],
"catcherActionName": "catchimage", /* 執行抓取遠程圖片的action名稱 */
"catcherFieldName": "source", /* 提交的圖片列表表單名稱 */
"catcherPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,可以自定義保存路徑和文件名格式 */
"catcherUrlPrefix": "", /* 圖片訪問路徑前綴 */
"catcherMaxSize": 2048000, /* 上傳大小限制，單位B */
"catcherAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 抓取圖片格式顯示 */
/* 上傳視頻配置 */
"videoActionName": "uploadvideo", /* 執行上傳視頻的action名稱 */
"videoFieldName": "upfile", /* 提交的視頻表單名稱 */
"videoPathFormat": "/ueditor/jsp/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,可以自定義保存路徑和文件名格式 */
"videoUrlPrefix": "", /* 視頻訪問路徑前綴 */
"videoMaxSize": 102400000, /* 上傳大小限制，單位B，默認100MB */
"videoAllowFiles": [
".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"], /* 上傳視頻格式顯示 */
/* 上傳文件配置 */
"fileActionName": "uploadfile", /* controller裏,執行上傳視頻的action名稱 */
"fileFieldName": "upfile", /* 提交的文件表單名稱 */
"filePathFormat": "/ueditor/jsp/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,可以自定義保存路徑和文件名格式 */
"fileUrlPrefix": "", /* 文件訪問路徑前綴 */
"fileMaxSize": 51200000, /* 上傳大小限制，單位B，默認50MB */
"fileAllowFiles": [
".png", ".jpg", ".jpeg", ".gif", ".bmp",
".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
], /* 上傳文件格式顯示 */
/* 列出指定目錄下的圖片 */
"imageManagerActionName": "listimage", /* 執行圖片管理的action名稱 */
"imageManagerListPath": "/ueditor/jsp/upload/image/", /* 指定要列出圖片的目錄 */
"imageManagerListSize": 20, /* 每次列出文件數量 */
"imageManagerUrlPrefix": "", /* 圖片訪問路徑前綴 */
"imageManagerInsertAlign": "none", /* 插入的圖片浮動方式 */
"imageManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 列出的文件類型 */
/* 列出指定目錄下的文件 */
"fileManagerActionName": "listfile", /* 執行文件管理的action名稱 */
"fileManagerListPath": "/ueditor/jsp/upload/file/", /* 指定要列出文件的目錄 */
"fileManagerUrlPrefix": "", /* 文件訪問路徑前綴 */
"fileManagerListSize": 20, /* 每次列出文件數量 */
"fileManagerAllowFiles": [
".png", ".jpg", ".jpeg", ".gif", ".bmp",
".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
] /* 列出的文件類型 */
}