jsp富文本图片和数据上传
好记性不如烂笔头,记录一下。
2016的最后一天,以一篇博客结尾迎接新的一年。
此处用的富文本编辑器是wangEditor,一款开源的轻量级的富文本编辑器,这里着重说一下里面的图片上传功能。
服务器端接收图片用到了两个jar包,分别是commons-fileupload和commons-io。
下载下来之后./test/test-uploadfn.html,打开该文件,找到下面这行代码。
editor.config.uploadImgUrl = '/wangEditor/Upload'; //等号后面写上你上传的后台路径,这里是我的路径
接下来是对服务器端的操作,这里用一个Servlet做演示,新建一个Servlet,在Post里面写上对处理前端上传图片请求得代码,如下。
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
request.setCharacterEncoding("utf-8"); DiskFileItemFactory factory = new DiskFileItemFactory(); //解析器的配置信息 ServletFileUpload upload = new ServletFileUpload(factory); //解析器的实例化对象 String fileName = String.valueOf(new Date().getTime() + ".jpg"); //取得一个唯一的图片名称 //我将fileName写在这个位置,而没有写在下面的for循环当中,是因为当我传图片时,一张图片,从前台会提交两次请求,
//如果写在for里面会导致我分成两张图片保存,造成的后果就是图片格式不正确,所以我写在这里。
//这个demo在这个地方也就被限定了,只能进行一次上传一张图片的操作 try {
ArrayList<FileItem> files = (ArrayList<FileItem>) upload.parseRequest(request); for(FileItem item : files) { InputStream is = item.getInputStream(); //这里得到图片对象的输流,我将在下文中写入文件中 ServletContext context = getServletContext(); String Path = context.getRealPath("/upload"); //存放图片的目录 File pic_file = new File(Path); if(!pic_file.exists() || !pic_file.isDirectory()) { //不存在或者不是目录就创建文件夹
pic_file.mkdir();
} pic_file = new File(Path+"/"+fileName); FileOutputStream out = new FileOutputStream(pic_file); //准备写入文件的输出流 //建立缓冲区数组
byte[] buffer = new byte[1024]; //缓冲区数组的长度定义,当IO从流中获取不到数据的时候,返回值为-1
int len = -1; //循环写入文件
while((len = is.read(buffer)) > -1) {
out.write(buffer,0,len);
} is.close(); out.close(); item.delete(); response.getWriter().print("/wangEditor/upload/"+fileName); } } catch (FileUploadException e) {
e.printStackTrace();
} }
这样一个简单的传图demo就做好了。
示例图:
打开test-uploadfn.html。
开始点击上传图片到upload文件夹下。
选择图片完成之后,如下图所示。
我传了一张大图。
jsp富文本图片和数据上传的更多相关文章
- 富文本编辑器handyeditor,上传和预览图片的host地址不一样
使用富文本编辑器(官网)时,大多时候都会用到图片上传,但是下载的富文本编辑器的默认配置是只有一个上传地址的host的. var he = HE.getEditor('editor', { autoHe ...
- Django之富文本编辑器kindeditor 及上传
1.什么是富文本编辑器 百度百科(https://baike.baidu.com/item/%E5%AF%8C%E6%96%87%E6%9C%AC%E7%BC%96%E8%BE%91%E5%99%A8 ...
- Ueditor富文本编辑器--上传图片自定义上传操作
最近负责将公司官网从静态网站改版成动态网站,方便公司推广营销人员修改增加文案,避免官网文案维护过于依赖技术人员.在做后台管理系统时用到了富文本编辑器Ueditor,因为公司有一个阿里云文件资源服务器, ...
- JSP Ueditor 实现图片跨域上传
Ueditor的单图上传,在官方文档上明确写了不支持 然后通过百度找了许多方案,终于有一个可以解决了. http://www.cnblogs.com/hpnet/p/6290452.html 不过那个 ...
- 从web编辑器 UEditor 中单独提取图片上传,包含多图片单图片上传以及在线涂鸦功能
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码.(抄的...) UEditor是非常好用的富文 ...
- jsp\struts1.2\struts2 中文件上传(转)
jsp\struts1.2\struts2 中文件上传 a.在jsp中简单利用Commons-fileupload组件实现 b.在struts1.2中实现c.在sturts2中实现现在把Code与大家 ...
- UEditor+七牛,实现图片直连上传
最近做的项目,涉及到使用富文本编辑器,我选择了百度的UEditor.同时,我们的图片放在七牛云存储上.关于这两者间的集成,我写下一些个人的经验,与大家分享. 图片上传方案 目前来说,Web端基于七牛等 ...
- 个人永久性免费-Excel催化剂功能第20波-Excel与Sqlserver零门槛交互-数据上传篇
Excel作为众多数据存储的交换介质,在不同的系统内的数据很少可以很连贯地进行整合分析,一般的业务系统都会提供导出Excel作为标配功能供用户使用系统内生成的数据. 此时最大的问题是,Excel很维去 ...
- div中粘贴图片并上传服务器 div中拖拽图片文件并上传服务器
应用简介:此文主要是描述如何在前端div中直接ctrl+v 粘贴图片,并上传到服务器,包括拖拽图片文件到div中 应用场景描述:用QQ或者其它切图软件截图,在指定的div中ctrl+v 粘贴并显示,点 ...
随机推荐
- 【探索】机器指令翻译成 JavaScript
前言 前些时候研究脚本混淆时,打算先学一些「程序流程」相关的概念.为了不因太枯燥而放弃,决定想一个有趣的案例,可以边探索边学. 于是想了一个话题:尝试将机器指令 1:1 翻译 成 JavaScript ...
- MVVM模式解析和在WPF中的实现(三)命令绑定
MVVM模式解析和在WPF中的实现(三) 命令绑定 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在WPF中 ...
- 使用ServiceStack构建Web服务
提到构建WebService服务,大家肯定第一个想到的是使用WCF,因为简单快捷嘛.首先要说明的是,本人对WCF不太了解,但是想快速建立一个WebService,于是看到了MSDN上的这一篇文章 Bu ...
- 清空Github上某个文件的历史版本
title: 清空Github上某个文件的历史版本 author: 青南 date: 2015-01-08 16:04:53 categories: [经验] tags: [Github,histor ...
- OpenCV模板匹配算法详解
1 理论介绍 模板匹配是在一幅图像中寻找一个特定目标的方法之一,这种方法的原理非常简单,遍历图像中的每一个可能的位置,比较各处与模板是否“相似”,当相似度足够高时,就认为找到了我们的目标.OpenCV ...
- SQL Server 2016白皮书
随着SQL Server 2016正式版发布日临近,相关主要特性通过以下预览学习: Introducing Microsoft SQL Server 2016 e-bookSQL Server 201 ...
- 【用户交互】APP没有退出前台但改变系统属性如何实时更新UI?监听系统广播,让用户交互更舒心~
前日,一小伙伴问我一个问题,说它解决了半天都没解决这个问题,截图如下: 大概楼主理解如下: 如果在应用中有一个判断wifi的开关和一个当前音量大小的seekbar以及一个获取当前电量多少的按钮,想知道 ...
- javascript中变量提升的理解
网上找了两个经典的例子 var foo = 1; function bar() { if (!foo) { var foo = 10; } alert(foo); } bar(); // 10 var ...
- TFS 2015 敏捷开发实践 – 在Kanban上运行一个Sprint
前言:在 上一篇 TFS2015敏捷开发实践 中,我们给大家介绍了TFS2015中看板的基本使用和功能,这一篇中我们来看一个具体的场景,如何使用看板来运行一个sprint.Sprint是Scrum对迭 ...
- Ubuntu设置root用户登录图形界面
Ubuntu默认的是root用户不能登录图形界面的,只能以其他用户登录图形界面.这样就很麻烦,因为权限的问题,不能随意复制删除文件,用gedit编辑文件时经常不能保存,只能用vim去编辑. 解决的办法 ...