上传图片并保存到数据库

seam给我们提供了 s:fileUpload 标签以完成文件上传功能.使用该标签时,要在web.xml中声明一个Seam的过滤器:
<filter>
  <filter-name>Seam Filter</filter-name>
  <filter-class>org.jboss.seam.servlet.SeamFilter</filter-class>
</filter>

<filter-mapping>
  <filter-name>Seam Filter</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>

s:fileUpload 标签主要属性:

  • data: 需绑定一个byte[] 数组,用来接收上传的二进制数据.
  • fileName: 上传文件的文件名
  • accept: 允许上传的文件类型,可取 "images/png", "images/jpg".
用法示例:

<h:form enctype="multipart/form-data" id="upload-form">
								<s:fileUpload data="#{memberHome.instance.avator}" fileName="#{memberHome.fileName}" />
								<h:commandButton value="上传照片" action="#{memberHome.update()}"
									styleClass="btn btn-primary btn-small">
								</h:commandButton>
							</h:form>

这里 avator 是一个byte[]数组,fileName是一个String对象.
注意必须在form中使用 "multipart/form-data" 的编码类型.

当用户选择好图片,点击"上传照片"后,图片数据会首先被保存到Member实体Bean中的avator属性中,随后memberHome的update()方法被调用,JPA会把avator中的数据持久化到数据库中.

从数据库中读出图片并在页面中显示

要显示图片,可以使用<img>标签.但由于图片是保存在数据库中的,所以无法用将img的src属性设置为图片路径的方式来显示图片.这时候我们可以使用Servlet来完成这一功能.即将src指向一个Servlet,由这个Servlet负责把图片从数据库中取出并返回.

要在Servlet中访问数据数,可以先通过JNDI查询返回一个DataSource(数据源),通过DataSource的getConnection()方法来建立与数据库的连接,即使用JDBC访问数据库.
JNDI查询方法如下:
private DataSource getDS() throws NamingException {
		Context context = new InitialContext();
		return (DataSource) context.lookup("zhiduiDatasource");
	}

lookup()中要传递你要查询的对象的名称,即在persistence.xml中<jta-data-source>节点所声明的数据源.有关JNDI的详细说明,参见Oracle官方指南:
http://docs.oracle.com/javase/7/docs/technotes/guides/jndi/


之后就可以从数据库中读出图片数据了:
private void getImageByte() {
		DataSource ds = null;
		Connection conn = null;

		try {
			ds = getDS();
			conn = ds.getConnection();
			Statement stat = conn.createStatement();
			ResultSet res = stat.executeQuery("select * from member where id='" + memberId + "'");

			while(res.next()) {
				imageByte = res.getBytes("avator_file");
			}

		} catch(SQLException ex) {
			ex.printStackTrace();
		} catch(NamingException ex) {
			ex.printStackTrace();
		} finally {
			try {
				conn.close();
			} catch(SQLException ex) {
				ex.printStackTrace();
			}
		}

	}

最后在doGet()方法中将读出的byte[]数据返回:

@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		String parm = req.getParameter("memberId");
		memberId = Integer.parseInt(parm);

		getImageByte();
		resp.getOutputStream().write(imageByte, 0, imageByte.length);
	}

别忘了在web.xml中声明你的ImageServer并配置URL映射:

<servlet>
		<servlet-name>Image Servlet</servlet-name>
		<servlet-class>cn.edu.sudt.zhidui.servlet.ImageServlet</servlet-class>
	</servlet>

	<servlet-mapping>
		<servlet-name>Image Servlet</servlet-name>
		<url-pattern>*.showimg</url-pattern>
	</servlet-mapping>

这时使用<img>标签就能成功地将图片显示到页面中了.

<img src="asd.showimg?memberId=#{memberHome.instance.id}" />

用Seam实现:图片上传 + 保存到数据库 + 从数据库读出图片并显示到页面中的更多相关文章

  1. kindeditor扩展粘贴图片功能&amp;修改图片上传路径并通过webapi上传图片到图片服务器

    前言 kindeditor是一个非常好用的富文本编辑器,它的简单使用我就不再介绍了. 而kindeditor却对图片的处理不够理想. 本篇博文需要解决的问题有两个: kindeditor扩展粘贴图片功 ...

  2. kindeditor扩展粘贴截图功能&amp;修改图片上传路径并通过webapi上传图片到图片服务器

    前言 kindeditor是一个非常好用的富文本编辑器,它的简单使用我就不再介绍了. 而kindeditor却对图片的处理不够理想. 本篇博文需要解决的问题有两个: kindeditor扩展粘贴图片功 ...

  3. html + js 实现图片上传,压缩,预览及图片压缩后得到Blob对象继续上传问题

    先上效果 上传图片后(设置了最多上传3张图片,三张后上传按钮消失) 点击图片放大,可以使用删除和旋转按钮 (旋转功能主要是因为ios手机拍照后上传会有写图片被自动旋转,通过旋转功能可以调正) html ...

  4. Thinkphp5+plupload图片上传功能,支持实时预览图片。

    今天和大家分享一个国外的图片上传插件,这个插件支持分片上传大文件.其中著名的七牛云平台的jssdk就使用了puupload插件,可见这个插件还是相当牛叉的. 这个插件不仅仅支持图片上传,还支持大多数文 ...

  5. vue 实现图片上传与预览,以及清除图片

    vue写原生的上传图片并预览以及清除图片的效果,下面是demo,其中里面有vue获取input框value值的方法以及vue中函数之间的调用 <!DOCTYPE html> <htm ...

  6. ssm框架实现图片上传显示并保存地址到数据库

    本案例是通过springmvc+spring+mybatis框架以商品上传为例,实现的图片上传功能,并把图片的地址保存到数据库并在前台显示上传的图片. 本项目是使用maven搭建的项目,首先看下项目结 ...

  7. JS图片上传预览插件制作(兼容到IE6)

    其实,图片预览功能非常地常见.很意外,之前遇到上传图片的时候都不需要预览,也一直没有去实现过.现在手上的项目又需要有图片预览功能,所以就动手做了一个小插件.在此分享一下思路. 一.实现图片预览的一些方 ...

  8. springMVC框架下——通用接口之图片上传接口

    我所想要的图片上传接口是指服务器端在完成图片上传后,返回一个可访问的图片地址. spring mvc框架下图片上传非常简单,如下 @RequestMapping(value="/upload ...

  9. asp.net 百度编辑器 UEditor 上传图片 图片上传配置 编辑器配置 网络连接错误,请检查配置后重试

    1.配置ueditor/editor_config.js文件,将 //图片上传配置区 ,imageUrl:URL+"net/imageUp.ashx" //图片上传提交地址 ,im ...

随机推荐

  1. NOI2016模拟赛Zbox loves stack

    #include <iostream> #include <cstdio> #include <cstring> #include <cmath> #i ...

  2. linux学习之——基础命令

    Linux体系基础命令: Linux是一个命令行组成的操作体系!精华在命令行,岂论图形界面成长到什么水平这个原理是不会变的,Linux命令有许多壮大的效用:从简单的磁盘操作.文件存取.到举办庞大的多媒 ...

  3. Linux 关闭防火墙命令

    用linux自己来访问web是可以的 比如 192.168.2.20就可以访问本机的相关页面 用192.168.2.20/phpmyadmin就可以访问数据库相关内容 可是,当别的局域网的电脑想访问时 ...

  4. Qt动画与Qt坐标小记

    Qt动画 转载自: <http://jingyan.baidu.com/article/154b46315757b628ca8f4116.html> 和  <http://blog. ...

  5. vimer

    vimer 第1.0章.统一概念   不管学什么技术,我都深信概念是最重要的.是影响整个学习轨迹,决定能在这个技术领域高度. 当然如果你现在的目的不是在学习而在于解决问题(很多人不愿意承认,或者没发现 ...

  6. 用Vue中遇到的问题和处理方法(一)

    用Vue开发项目有一段时间,在实际项目中遇到一些问题,在里把问题记录下来,并附上解决方案,给遇到同样的问题的码友提供一个解决思路吧: 测试部抛出问题一:在Vue1.0路由vue-router中,当点击 ...

  7. python一直放弃到双数的day10

    今天接着来说那个新的大知识点,函数,函数中是可以传递一个数值的,这个数值简称为参数,对于参数,他可以是任意个数和任意类型(数据类型).参数的其中一种有位置传参,函数中的参数有几个,那么就要传入几个,传 ...

  8. c语言头文件的认识

    c头文件的作用是什么,和.c文件是怎么联系的,该怎么样编写头文件呢?这些问题我一直没搞明白,在阅读uCOS-II(邵贝贝)“全局变量”部分有些疑惑,今天终于搞清楚了头文件的一些基础知识,特地分享一下. ...

  9. JavaBean理解

    Java语言欠缺属性.事件.多重继承功能.所以,如果要在Java程序中实现一些面向对象编程的常见需求,只能手写大量胶水代码.Java Bean正是编写这套胶水代码的惯用模式或约定.这些约定包括getX ...

  10. 【Jmeter】如何通过文件导入方式对用户名和密码进行参数化设置

    JMeter 参数化 注意:param和data body只能用一个.所有任何一个里面有内容,切换都会报错,这不是问题,jmeter是这么设计的 方法一:通过添加CSV Data Set Config ...