jsp如何显示本地图片？

SeaHorse 2011-05-18 04:33:43
如题！
...全文
4547 33 打赏 收藏 转发到动态 举报
写回复
用AI写文章
33 条回复
切换为时间正序
请发表友善的回复…
发表回复
小熊_ 2012-01-11
  • 打赏
  • 举报
 回复
碰到和楼主一样的问题了，求解决办法
GIS__ 2011-08-20
  • 打赏
  • 举报
 回复
<img src ="xxx.jpg"/>
caixuanbin 2011-08-20
  • 打赏
  • 举报
 回复
也帮楼主顶顶
luohuijun619 2011-08-19
  • 打赏
  • 举报
 回复
<img src="">指向图片的路径
underhiswing 2011-08-19
  • 打赏
  • 举报
 回复
最好得到上传图片的绝对路径！！！
blueclc 2011-08-19
  • 打赏
  • 举报
 回复
显示本地的图片，比如图片在你的工程里面，你的jsp页面可以
<img src="../image.gif" />
nirvana_dds 2011-08-19
  • 打赏
  • 举报
 回复
[Quote=引用 20 楼 wcskk 的回复:]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题……
[/Quote]
这个方法就行了
晋冬子 2011-08-19
  • 打赏
  • 举报
 回复
http://download.csdn.net/source/3532658
应该对你有用
qq1255747135 2011-08-19
  • 打赏
  • 举报
 回复
LZ试试下面的代码，应该就可以了
<script type="text/javascript" src="js/jquery-1.5.js"></script>
<script type="text/javascript">
function post(){
var a =$('#a').val();
alert(a);
$('#img').attr("src",a);;
}
</script>
</head>

<body>
<input type="file" id="a" onchange="post();">
<img id="img"/>
</body>

桃园闲人 2011-08-19
  • 打赏
  • 举报
 回复
[Quote=引用 3 楼 lovemekc 的回复:]

<img src="">
最好用绝对路径
[/Quote]

预览直接获得用户选择的文件路径(包含文件名)放用js添加到img的src中就可以了。
lee511411973 2011-08-19
  • 打赏
  • 举报
 回复
Marke
leafy 2011-08-19
  • 打赏
  • 举报
 回复
[Quote=引用 8 楼 xiongdan1982 的回复:]
用javascript改变<img src="">里的src路径不就可以了！
当点击预览时，选择好图片，再将图片的绝对路径，设置到<img src="">里面。
当浏览下张图片时，绝对路径变了，图片不就变了！
[/Quote]
这样是不行滴，jsp不可以显示非webapp下的本地图片。
冷面 2011-06-08
  • 打赏
  • 举报
 回复
不能显示，
在谷歌浏览器下都不兼容。
还是把图片上传后再显示吧。
wcskk 2011-05-26
  • 打赏
  • 举报
 回复
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<script language="javascript">
function setImg(){
var v=form1.myfile.value;
//alert(v);
document.getElementById("myImg").innerHTML="<img src='"+v+"'>";
}
</script>
<body>
<form name="form1" method="post" action="">
<input name="myfile" type="file" onChange="setImg()">
<div id="myImg"></div>
</form>
</body>
</html>

这样就可以了。
msl1010895047 2011-05-26
  • 打赏
  • 举报
 回复 
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%@taglib prefix="s" uri="/struts-tags"%>

<%

	String path = request.getContextPath();

	String basePath = request.getScheme() + "://"

			+ request.getServerName() + ":" + request.getServerPort()

			+ path + "/";

%>



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

	<head>

		<base href="<%=basePath%>">



		<title>上传图片</title>



		<meta http-equiv="pragma" content="no-cache">

		<meta http-equiv="cache-control" content="no-cache">

		<meta http-equiv="expires" content="0">

		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

		<meta http-equiv="description" content="This is my page">



		<link rel="stylesheet" type="text/css"

			href="<%=basePath%>css/validate.css">





		<script type="text/javascript"

			src="<%=basePath%>/js/jquery-1.3.2.min.js"></script>

		<script type="text/javascript"

			src="<%=basePath%>/js/easy_validator.pack.js"></script>



		<style type="text/css">

.img {

	width: 136px;

	height: 102px;

}



.imgError {

	border: 3px solid red;

}

</style>

		<script type="text/javascript">  

         //限制上传图片大小1000K  

        var MAXSIZE = 1000 * 1024;  

          

        //图片大小限制信息  

        var ERROR_IMGSIZE = "图片大小不能超过1000K";  

        //默认图片  

        var NOPHOTO = "<%=basePath%>image/bg2.jpg";  

          

        //图片是否合格  

        var isImg = true;  

        /** 

         * Input file onchange事件 

         * @params obj file对象 

         * @return void 

         **/  

        function checkFileChange(obj) {  

              

            //初始化设置  

            $(".imgTable").removeClass("imgError");  

            updateTips("");  

            var img = $(".img").get(0);  

            var file = obj.value;  

            var exp = /.\.jpg|.\.gif|.\.png|.\.bmp/i;  

            if (exp.test(file)) {//验证格式  

                if($.browser.msie) {//判断是否是IE  

                    img.src = file;  

                } else {  

                    img.src = obj.files[0].getAsDataURL();  

                    sizeCheck(img);  

                }  

                  

            } else {  

                img.src = NOPHOTO;   

                $(".imgTable").addClass("imgError");  

                updateTips("图片格式不正确");  

                isImg = false;  

            }  

              

        }  

        /** 

         * sizeCheck 检查图片大小 

         * @params img 图片对象 

         * @return void  

         **/  

        function sizeCheck(img) {  

            //初始化设置  

            $(".imgTable").removeClass("imgError");  

            updateTips("");  

            if ($.browser.msie) {//查看是否是IE  

                if(img.readyState == "complete") {  

                   if (img.fileSize > MAXSIZE) {  

                        $(".imgTable").addClass("imgError");  

                        updateTips(ERROR_IMGSIZE);  

                        isImg =  false;  

                   }else {  

                        isImg = true;  

                   }  

                     

                }else {  

                    $(".imgTable").addClass("imgError");  

                    updateTips(ERROR_IMGSIZE);  

                    isImg =  false;  

                }            

                  

            } else {  

                var file = $("input:file[name='image']")[0];  

                      

                if (file.files[0].fileSize > MAXSIZE) {  

                    $(".imgTable").addClass("imgError");  

                    updateTips(ERROR_IMGSIZE);  

                    isImg =  false;  

                }else {  

                    isImg = true;  

                }      

                       

            }  

        }  

          

        /** 

         * updateTips 注册错误信息显示 

         * @params str 显示内容 

         * @return void 

         **/  

        function updateTips(str) {  

            $("p#errorTips").text(str);  

        }  

        /** 

         * commit 注册提交 

         * @return void 

         **/  

        function commit() {  

              

            var isCommit = true;  

            var img     = $(".img"),  

                file    = $("input:file[name='image']"),  

                frm     = document.frm;  

            isCommit = isCommit && isImg;  

            if(isCommit) {  

                frm.submit();  

            }  

        }  

        /** 

         * errorImg 图片错误显示 

         * @params img 图片对象 

         * @return void 

         **/  

        function errorImg(img) {  

            img.src = NOPHOTO;  

        }  

      

      </script>

		</script>

	</head>

	<body>

		<form id="frm" name="frm" onSubmit="return commit();"

			action="${public String _elExpressionpageContext.getRequest().getContextPath()}/upload/PicUpload"

			enctype="multipart/form-data" method="post">

			<p />

				<table cellpadding="0" cellspacing="0" class="imgTable">

					<tr>

						<td>

							<img src="<%=basePath%>image/bg2.jpg" class="img" alt="头像预览"

								onerror="Javascript:errorImg(this);"

								onreadystatechange="Javascript:sizeCheck(this);" />

						</td>

					</tr>

				</table>

				<input type="file" name="image"

					onchange="Javascript:checkFileChange(this);" size="12"

					class="input_validation-failed" reg=".*gif|jpg|bmp|png$"

					tip="允许gif,jpg,bmp,png图片" />

				<span id="files">

					<p />

				</span>

				<img onClick="javascript:commit()" style="cursor: pointer"

					src="<%=basePath%>/image/pic.jpg" />

				<p />

					<font color="red"><p id="errorTips"></p>

					</font>

					<s:property value="message" />

					<p />

						<font color="red">特别提醒：上传相同文件名的图片会覆盖上次上传的同名文件，且图片大小不能超过1000K，请慎重！</font>

		</form>

	</body>

</html>
clxclx1990 2011-05-25
  • 打赏
  • 举报
 回复
<img src="">
最好用相对路径
SeaHorse 2011-05-19
  • 打赏
  • 举报
 回复
[Quote=引用 15 楼 siosxiaoqiang 的回复:]

引用 10 楼 yuhongpingimu 的回复:
http://www.cnblogs.com/cloudgamer/archive/2009/12/22/ImagePreview.html给你找了个例子，在最下边的地方有JSP源码下载。你好好看看，理解理解

我原来公司的项目就是参考这个网址做的，并且使用了fck编辑器，很好用，楼主不妨参考下。
[/Quote]正在看，初步观察好像谷歌浏览器有些问题。
jiabo4077009 2011-05-19
  • 打赏
  • 举报
 回复
用js来更改路径
SIOSXIAOQIANG 2011-05-19
  • 打赏
  • 举报
 回复
[Quote=引用 10 楼 yuhongpingimu 的回复:]
http://www.cnblogs.com/cloudgamer/archive/2009/12/22/ImagePreview.html给你找了个例子，在最下边的地方有JSP源码下载。你好好看看，理解理解
[/Quote]
我原来公司的项目就是参考这个网址做的，并且使用了fck编辑器，很好用，楼主不妨参考下。
qq31946 2011-05-19
  • 打赏
  • 举报
 回复
你在将jsp中用 <img src=image/<jsp:getProperty name="upFile" property="savedFileName"/>来获取图片<jsp:getProperty name="upFile" property="savedFileName"/>的意思是得到图片地址
我用 javabean+jsp做的
加载更多回复（13）
jsp中显示本地图片
jsp显示本地文件
JSP：显示本地图片
<%@page import="javax.imageio.ImageIO"%> <%@page import="java.io.FileInputStream"%> <%@page import="java.io.InputStream"%> <%@page import="java.io.File"%> <%@page import="java.io.OutputStream"%>
Web 开发

81,091

社区成员

341,719

社区内容

发帖
与我相关
我的任务
社区描述
Java Web 开发
社区管理员
  • Web 开发社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章