JSP中图片的上传与显示方法实例详解

本文实例讲述了JSP中图片的上传与显示方法。分享给大家供大家参考。具体如下：

1、引言

数据库应用程序，特别是基于WEB的数据库应用程序，常会涉及到图片信息的存储和显示。通常我们使用的方法是将所要显示的图片存在特定的目录下，在数据库中保存相应的图片的名称，在JSP中建立相应的数据源，利用数据库访问技术处理图片信息。但是，如果我们想动态的显示图片，上述方法就不能满足需要了。我们必须把图片存入数据库，然后通过编程动态地显示我们需要的图片。实际操作中，可以利用JSP的编程模式来实现图片的数据库存储和显示。

2、建立后台数据库

假定处理的是图片新闻，那么我们可以建立相应的数据库及数据表对象。我们要存取的数据表结构的SQL脚本如下所示：

if exists (select * from dbo.sysobjects where id =
object_id(N'[dbo].[picturenews]') andOBJECTPROPERTY(id, N'IsUserTable') = 1)
drop table [dbo].[picturenews]
GO
CREATE TABLE [dbo].[picturenews] (
    [id] [int] IDENTITY (1, 1) NOT NULL ,
    [image] [image] NULL ,
    [content] [varchar] (500) COLLATE Chinese_PRC_CI_AS NULL ,
    [detail] [varchar] (5000) COLLATE Chinese_PRC_CI_AS NULL
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]
GO

表picturenews中，字段id作为标识，每存储一行数据，自动增加1。字段image
用于存储图片信息，其数据类型为“image”。
 
3、向数据库存储二进制图片

新建一个JSP文件。其代码如下所示。

<%@ page contentType="text/html;charset=gb2312"%>
<HTML>
<HEAD>
<TITLE>存储图片</TITLE>
</HEAD>
<body>
<!-- 下面的窗体将以Post方法，将数据传递给testimage.jsp文件 -->
<FORM METHOD=POST ACTION="testimage.jsp">
新 闻 标 题：<INPUT TYPE="text" NAME="content"><BR>
新 闻 图 片：<INPUT TYPE="file" NAME="image"><BR>
新闻内容：<TEXTAREA name="txtmail" rows="15" cols="90" style="BORDER-BOTTOM: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; FONT-SIZE: 9pt; HEIGHT: 200px; WIDTH: 100%" wrap="physical" ></TEXTAREA><br>
<INPUT TYPE="submit"></form>
</body>
</HTML>

将此文件保存为InputImage.jsp文件，其中testimage.jsp文件是用来将图片数据存入数据库的，具体代码如下所示：

<%@ page contentType="text/html;charset=gb2312"%>
<%@ page import="java.sql.*" %>
<%@ page import="java.util.*"%>
<%@ page import="java.text.*"%>
<%@ page import="java.io.*"%>
<html>
<body>
<%Class.forName("com.microsoft.jdbc.sqlserver.SQLServerDriver"); //加载驱动程序类
 Connection con=DriverManager.getConnection("jdbc:microsoft:sqlserver://localhost:1433;DatabaseName=upload_Image","sa","sa");
//建立数据库联机，其中upload_Image为数据库名，sa为连接数据库的帐号及密码。
Statement stmt=con.createStatement();
//建立Statement对象
String content=request.getParameter("content");
content=new String(content.getBytes("8859_1"),"gb2312");
String filename=request.getParameter("image");
filename=new String(filename.getBytes("8859_1"),"gb2312");
String detail=request.getParameter("txtmail");
detail=new String(detail.getBytes("8859_1"),"gb2312");
//获得所要显示图片的标题、存储路径、内容，并进行中文编码
FileInputStream str=new FileInputStream(filename);
String sql="insert into picturenews(content,image,detail) values(?,?,?)";
PreparedStatement pstmt=con.prepareStatement(sql);
pstmt.setString(1,content);
pstmt.setBinaryStream(2,str,str.available());
pstmt.setString(3,detail);
pstmt.execute();
//将数据存入数据库
out.println("Success,You Have Insert an Image Successfully");
%>

4、网页中动态显示图片

接下来我们要编程从数据库中取出图片，其代码如下所示。

<%@ page contentType="text/html;charset=gb2312"%>
<%@ page import="java.sql.*" %>
<%@ page import="java.util.*"%>
<%@ page import="java.text.*"%>
<%@ page import="java.io.*"%>
<html>
<body>
<%
<%Class.forName("com.microsoft.jdbc.sqlserver.SQLServerDriver"); //加载驱动程序类
 Connection con=DriverManager.getConnection("jdbc:microsoft:sqlserver://localhost:1433;DatabaseName=upload_Image","sa","sa");
//建立数据库联机，其中upload_Image为数据库名，sa为连接数据库的帐号及密码。
Statement stmt=con.createStatement();
ResultSet rs=null;
//建立ResultSet（结果集）对象
int id= Integer.parseInt(request.getParameter("id"));
//获得所要显示图片的编号id，并转换为整型
String sql = "select image from picturenews WHERE id="+id+"";
//要执行查询的SQL语句
rs=stmt.executeQuery(sql);
while(rs.next()) {
ServletOutputStream sout = response.getOutputStream();
//图片输出的输出流
InputStream in = rs.getBinaryStream(1);
byte b[] = new byte[0x7a120];
for(int i = in.read(b); i != -1;)
{
sout.write(b);
//将缓冲区的输入输出到页面
in.read(b);
}
sout.flush();
//输入完毕，清除缓冲
sout.close();
}
%>
</body>
</html>

将此文件保存为testimageout.jsp文件。下一步要做的工作就是使用HTML标记：

<IMG src="testimageout.jsp?id=<%=rs.getInt("id")%>"  width=100 height=100>
取出所要显示的图片，其中id是所要取出图片的编号。本例中我们输出了第一个和最后一个图片信息，详细的程序代码如下所示。

<%@ page contentType="text/html;charset=gb2312"%>
<%@ page import="java.sql.*" %>
<html>
<head>
<title>动态显示数据库图片</title>
</head>
<body>
<%
<%Class.forName("com.microsoft.jdbc.sqlserver.SQLServerDriver"); //加载驱动程序类
 Connection con=DriverManager.getConnection("jdbc:microsoft:sqlserver://localhost:1433;DatabaseName=upload_Image","sa","sa");
//建立数据库联机，其中upload_Image为数据库名，sa为连接数据库的帐号及密码。
Statement stmt=con.createStatement();
String sql=new String();
sql= "select * from picturenews";
ResultSet rs=stmt.executeQuery(sql);
rs.last();
//将指针移至最后一条记录
%>
<table>
<tr><td><IMG height=99 src="testimageout.jsp?id=1" width=136></td>
//取出第一个图片
<td><IMG height=99 src="testimageout.jsp?id=<%=rs.getInt("id")%>" width=136></td>
//取出最后一个图片
</tr></table>
</body>
</html>

以上WEB应用程序在Windows xp/SQL Server 2000/ Apache Tomcat 4.0/Jbuilder环境下调试通过。

希望本文所述对大家的JSP程序设计有所帮助。

赞 (0)

相关推荐

  • Servlet+Jsp实现图片或文件的上传功能具体思路及代码

    现在不管是博客论坛还是企业办公,都离不开资源的共享.通过文件上传的方式,与大家同分享,从而达到大众间广泛的沟通和交流,我们既可以从中获得更多的知识和经验,也能通过他人的反馈达到自我改进和提升的目的. 下面我就为大家介绍 web项目中的这一上传功能,那么文件是如何从本地发送到服务器的呢?看我慢慢道来: 首先,我们创建一个新的web工程,在工程的WebRoot目录下新建一个upload文件夹,这样当我们将该工程部署到服务器上时,服务器便也生成个upload文件夹,用来存放上传的资源. 然后,在Web

  • jsp中点击图片弹出文件上传界面及实现预览实例详解

    jsp中点击图片弹出文件上传界面及实现预览实例详解 花了两天时间琢磨一下图片预览的功能 任务需求如下: 1:jsp页面中有一个图片(pic_1) 2:点击图片弹出类似于资源管理器的界面 3:选择完某一个图片之后在pic_1处预览 我在IE8上试验下面这段代码,可以实现上述功能,没有在别的浏览器中测试,如果各位朋友知道多种浏览器的支持方法,请赐教,共同学习,谢谢. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN&qu

  • 解决图片路径中含有中文在jsp下不能正常显示问题

    如:<img src="/pic/lupload/img工行上传.jpg" />,图片路径正确,放到一个单独的html页面中也能正常打开,在jsp中就是不显示图片 原因在于没有在tomcat配置URIEncoding.修改方法: 在tomcat的server.xml中加入URIEncoding="utf-8"(网页的编码是utf-8) 复制代码 代码如下: <Connector port="8080" URIEncoding=&

  • JSP实用教程之简易图片验证码的实现方法（附源码）

    JSP实用教程之简易图片验证码的实现方法（附源码）

    前言 很多新手对图片验证码不是很了解,所以本文尝试通过一个简单的 JSP 小程序来实现验证码功能.文中给出了详细的示例代码,文末给出了完整实例代码的下载地址,下面话不多说了,来一起看看详细的介绍吧. 效果图 示例代码 前台代码如下: <form action="action.jsp" method="POST"> <label> 用户名: <input type="text" name="name"

  • JSP 获取本地图片的实例详解

    JSP 获取本地图片的实例详解 IE当前7以上版本不支持直接在src上写本地硬盘地址来显示图片.因为我们只有通过后台在response中读到二进制流的方式来在前台显示图片. 具体代码如下: public void showPicture(){ String id = ServletActionContext.getRequest().getParameter("id");//前台传来的存图片路径实体类的主键id HttpServletResponse response = Servle

  • Jsp中如何让图片在div中居中

    Jsp中如何让图片在div中居中

    jsp中让图片在div中居中显示,如上图 例子: 复制代码 代码如下: //CSS文件 <style type="text/css"> #bj{ width:200px; height:200px; border:3px solid red; text-align:center; vertical-align:middle; display:table-cell; //将对象作为表格单元格显示 background:pink; } img{ width:150px; hei

  • java实现图片上加文字水印（SpringMVC + Jsp）

    java实现图片上加文字水印（SpringMVC + Jsp）

    看之前要先对SpringMVC进行了解打好基础,下面直接先看效果图 代码编写 1.导入相关架包 2.配置文件 web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee"

  • JSP中图片的上传与显示方法实例详解

    本文实例讲述了JSP中图片的上传与显示方法.分享给大家供大家参考.具体如下: 1.引言 数据库应用程序,特别是基于WEB的数据库应用程序,常会涉及到图片信息的存储和显示.通常我们使用的方法是将所要显示的图片存在特定的目录下,在数据库中保存相应的图片的名称,在JSP中建立相应的数据源,利用数据库访问技术处理图片信息.但是,如果我们想动态的显示图片,上述方法就不能满足需要了.我们必须把图片存入数据库,然后通过编程动态地显示我们需要的图片.实际操作中,可以利用JSP的编程模式来实现图片的数据库存储和显

  • Flask 上传自定义头像的实例详解

    Flask Web 开发这本书基本上做完了,后面还需要温习,但是自己做的博客总觉得简陋了点,所以,在动脑子开发新功能 今天想到最基本的功能,自定义头像 那这样的功能,设计到2大基本功能块 1:如何进行文件的上传和保存 2:如何在用户模型里面将头像照片和用户挂钩起来 第二个问题我在查阅了网上的讨论后,得出基本上2种方法, 第一种是将图片变成二进制以后存入数据库 第二种是将图片直接存放于文件系统中 先研究如何上传文件成功这个事情 从最简单的开始 在main的views文件内,添加以下准备工作 imp

  • JavaScript中十种一步拷贝数组的方法实例详解

    JavaScript中十种一步拷贝数组的方法实例详解

    JavaScript中我们经常会遇到拷贝数组的场景,但是都有哪些方式能够来实现呢,我们不妨来梳理一下. 1.扩展运算符(浅拷贝) 自从ES6出现以来,这已经成为最流行的方法.它是一个很简单的语法,但是当你在使用类似于React和Redux这类库时,你会发现它是非常非常有用的. numbers = [1, 2, 3]; numbersCopy = [...numbers]; 这个方法不能有效的拷贝多维数组.数组/对象值的拷贝是通过引用而不是值复制. // numbersCopy.push(4);

  • Android中webview与JS交互、互调方法实例详解

    Android中webview与JS交互.互调方法实例详解 前言: 对于试水的功能,一般公司都会采用H5的方式来开发,可以用很少的资源与很短的项目工期来完成. 但许多情况下,H5页面会需要一些原生持有的一些如用户信息之类的数据,一些交互也需要调用原生的,如toast之类要保持同一个手机风格一致的交互行为.这个时候就需要能够让JS主动调用原生的方法来进行操作或者获取数据.或者是原生调用JS的方法在H5加载的时候传递一些参数. 对于原生调用JS的方法 我们需要实现一个WebViewClient,在这

  • Angular7中创建组件/自定义指令/管道的方法实例详解

    组件 使用命令创建组件 •创建组件的命令:ng generate component 组件名 •生成的组件组成: 组件名.html .组件名.ts.组件名.less.组件名.spec.ts •在组件的控制器 @Component({ selector: 'app-heroes', templateUrl: './heroes.component.html', styleUrls: ['./heroes.component.less'] }) 手动创建组件 1.创建一个组件ts文件 2.在组件中设

  • vue中实现上传文件给后台实例详解

    FormData 对象的使用: 1.用一些键值对来模拟一系列表单控件:即把form中所有表单元素的name与value组装成 一个queryString 2. 异步上传二进制文件. (ps:说白了就是不使用form表单实现form表单提交数据或文件,如果还是不懂,请自行百度) 实现过程 1.使用type类型为file的input框实现选择文件(顺便记录一下修改input框的默认样式) 2.修改input框的默认样式 3.通过选择文件拿到数据 4.请求接口 以上就是本次关于vue中实现上传文件给后

  • 使用Spring boot + jQuery上传文件(kotlin)功能实例详解

    使用Spring boot + jQuery上传文件(kotlin)功能实例详解

    文件上传也是常见的功能,趁着周末,用Spring boot来实现一遍. 前端部分 前端使用jQuery,这部分并不复杂,jQuery可以读取表单内的文件,这里可以通过formdata对象来组装键值对,formdata这种方式发送表单数据更为灵活.你可以使用它来组织任意的内容,比如使用 formData.append("test1","hello world"); 在kotlin后端就可以使用@RequestParam("test1") greet

  • Java中的隐式参数和显示参数实例详解

    在学习Java的过程中,我们会遇到许多的问题.下面我们就来看看什么是隐式参数和显示参数. 显式参数,就是平时见到的在方法名括号中间的参数,就是所谓能看得见的参数. 隐式参数,是在类的方法中调用了类的实例域.这个被调用的实例域就是隐式参数.在以下的这个类中调用了a.ariseSalary(100),就用到了隐式参数.比如: public class Abc { private double salary; public Abc(){ } public void ariseSalary(double

  • Android实现上传文件到服务器实例详解

    Android实现上传文件到服务器实例详解

    本实例实现每隔5秒上传一次,通过服务器端获取手机上传过来的文件信息并做相应处理:采用Android+Struts2技术. 一.Android端实现文件上传 1).新建一个Android项目命名为androidUpload,目录结构如下: 2).新建FormFile类,用来封装文件信息 package com.ljq.utils; import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundExce

  • node.js express框架实现文件上传与下载功能实例详解

    本文实例讲述了node.js express框架实现文件上传与下载功能.分享给大家供大家参考,具体如下: 背景 昨天吉视传媒的客户对IPS信息发布系统又提了一个新需求,就是发布端发送消息时需要支持附件的上传,而接收端可以对发布端上传的附件进行下载:接收端回复消息时也需要支持上传附件,发布端可以对所有接收端上传的附件进行打包下载. 功能实现 前台部分 前台使用webUploader插件即可,这是百度开发的一款文件上传组件,具体使用查看它的API即可.这个项目之前开发的时候前台使用了angular.

随机推荐