在前端页⾯上传⽂件到服务器⽅法⽰例在前端页⾯上传⽂件到服务器⽅法⽰例
1.选择图⽚
<div class="item1 update_pic" >
<span>摘要图⽚：</span>
<img src="${tPath}/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/..."转为"..."格式路径来进⾏显⽰图⽚*/
$("#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 = ateObjectURL(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"
value="<s:property value="article_title" />"
>
</div>
</div>
<input type="text" name="article_desc" id="article_desc" >
<div class="item1">
<span>所属分类：</span>
<select id="category_select" name="category.parentid" >
</select>
<select id="skill_select" name="category.cid" >
</select>
</div>
<div class="item1 update_pic" >
<span>摘要图⽚：</span>
<img src="${tPath}/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" ></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" >
修改</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 = place("-", "") + etx;
//确定上传的路径
String path = ServletContext().getRealPath("/upload");
File file = new File(path);
if(!ists()){
file.mkdirs();
}
//拼接新的⽂件路径
File desFile = new File(path + "/" + uuidFileName);
//⽂件上传
//设置图⽚
article.setArticle_pic(uuidFileName);
}
//设置当前时间
article.setArticle_time(new Date().getTime());
System.out.println(article);
//调⽤业务层保存到数据库当中
articleService.save(article);
return "listres";
}
3.集成富⽂本编辑器
4.富⽂本编辑器⽂件上传
mkdirs方法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 = RequestURI();
ains("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": "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/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"],
"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"
] /* 列出的⽂件类型 */
}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论