在前端页面上传文件到服务器方法示例
在前端页面上传文件到服务器方法示例
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”
] /* 列出的文件类型 */