28,404
社区成员
发帖
与我相关
我的任务
分享如何预览客户端的图片呢
打算做一个上传图片文件的模块，要求在上传前先预览一些。
那么如何实现吧本地硬盘上的图片在网页中预览呢。要求可以设置大小。
那么如何实现吧本地硬盘上的图片在网页中预览呢。要求可以设置大小。
...全文
请发表友善的回复…
发表回复
Soundboy 2005-04-18
- 打赏
- 举报
谢谢各位，给分了。
hhjjhjhj 2005-04-16
- 打赏
- 举报
简单一点，
window.open(file1.value);
也可以，
window.open(file1.value);
也可以，
sfply 2005-04-16
- 打赏
- 举报
<script>
function viewimg_a(){viewimg1.innerHTML = '<img border=0 src=file:///'+document.form.file1.value.replace(/ /g,"%20")+' onload=DrawImageNetdisk(this); >';}
</script>
缩略并预览
只要一选择文件既触发
function viewimg_a(){viewimg1.innerHTML = '<img border=0 src=file:///'+document.form.file1.value.replace(/ /g,"%20")+' onload=DrawImageNetdisk(this); >';}
</script>
缩略并预览
只要一选择文件既触发
笨笨兔兔兔兔兔 2005-04-16
- 打赏
- 举报
<html>
<head>
<title>新建网页 1</title>
</head>
<script>
function liu(){
var address;
address = document.all.file1.value;
if(address!=""){
document.all.img1.src=address;
document.all.showpath.value=address
}
}
</script>
<body>
<form method="POST" enctype="multipart/form-data" action="filesize.asp">
<input type="file" name="F1" size="20" id="file1"><input type="submit" value="提交" name="B1"><input type="reset" value="重置" name="B2">
</form>
<p><img border="0" src="4/1.jpg" width="315" height="480" id="img1"></p>
<input type="text" id="showpath" />
<input type="button" onclick="javascript:liu()" value="预览"> <a href="javacript:history.go(-1)">houtui</a></body></html>
<head>
<title>新建网页 1</title>
</head>
<script>
function liu(){
var address;
address = document.all.file1.value;
if(address!=""){
document.all.img1.src=address;
document.all.showpath.value=address
}
}
</script>
<body>
<form method="POST" enctype="multipart/form-data" action="filesize.asp">
<input type="file" name="F1" size="20" id="file1"><input type="submit" value="提交" name="B1"><input type="reset" value="重置" name="B2">
</form>
<p><img border="0" src="4/1.jpg" width="315" height="480" id="img1"></p>
<input type="text" id="showpath" />
<input type="button" onclick="javascript:liu()" value="预览"> <a href="javacript:history.go(-1)">houtui</a></body></html>
sfply 2005-04-15
- 打赏
- 举报
偶就做过这个预览功能
其实很简单的
用JS把上传文件输入框的内容显示出来即可
其实很简单的
用JS把上传文件输入框的内容显示出来即可
3573745 2005-04-15
- 打赏
- 举报
中国人的同学录相册好象有这么一贯功能
去看看了哦
去看看了哦
fantiny 2005-04-15
- 打赏
- 举报
改进版 如果横宽大于500，就缩小一半
----------------------------
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function View(){
document.all.div1.innerHTML="<img id='img1' src='" + document.all.file1.value + "' onload='zoom()' >"
}
function zoom(){
if( document.all.img1.width>500 ){
document.all.img1.style.zoom=0.5;
}
if(document.all.img1.height > 500){
document.all.img1.style.zoom=0.5;
}
/*if( document.all.img1.width < 250 ){
document.all.img1.style.zoom=2;
}
if(document.all.img1.height < 250){
document.all.img1.style.zoom=2;
}
*/
}
//-->
</SCRIPT>
</HEAD>
</BODY>
<INPUT TYPE="file" id="file1" onchange="View()">
<DIV id="div1"></DIV>
<BODY>
</HTML>
----------------------------
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function View(){
document.all.div1.innerHTML="<img id='img1' src='" + document.all.file1.value + "' onload='zoom()' >"
}
function zoom(){
if( document.all.img1.width>500 ){
document.all.img1.style.zoom=0.5;
}
if(document.all.img1.height > 500){
document.all.img1.style.zoom=0.5;
}
/*if( document.all.img1.width < 250 ){
document.all.img1.style.zoom=2;
}
if(document.all.img1.height < 250){
document.all.img1.style.zoom=2;
}
*/
}
//-->
</SCRIPT>
</HEAD>
</BODY>
<INPUT TYPE="file" id="file1" onchange="View()">
<DIV id="div1"></DIV>
<BODY>
</HTML>
fantiny 2005-04-15
- 打赏
- 举报
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function View(){
document.all.div1.innerHTML="<img src='" + document.all.file1.value + "'>"
}
//-->
</SCRIPT>
</HEAD>
</BODY>
<INPUT TYPE="file" id="file1" onchange="View()">
<DIV id="div1"></DIV>
<BODY>
</HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function View(){
document.all.div1.innerHTML="<img src='" + document.all.file1.value + "'>"
}
//-->
</SCRIPT>
</HEAD>
</BODY>
<INPUT TYPE="file" id="file1" onchange="View()">
<DIV id="div1"></DIV>
<BODY>
</HTML>
Accelerator 2005-04-15
- 打赏
- 举报
<img src="" width="" height="" name="showimg">
<input type="file" name="filename" onchange="javascript:document.showimg.src=this.value;">
我以前做的一个，不知道这个是不是你想要的。
在onchange里面可以增加图片的width和height的设置。
<input type="file" name="filename" onchange="javascript:document.showimg.src=this.value;">
我以前做的一个，不知道这个是不是你想要的。
在onchange里面可以增加图片的width和height的设置。
AppleBBS 2005-04-15
- 打赏
- 举报
<input type=file id=file onchange="img.src=file.value">
<br>
<img id=img>
<br>
<img id=img>
hinavy 2005-04-15
- 打赏
- 举报
晕，当你点浏览选 中那个图片后，那个文件框中不是有一个图片路径出来了？
在网页里面用javascript调用那个路径，再显示出来即可了啊？这样不行吗？
在网页里面用javascript调用那个路径，再显示出来即可了啊？这样不行吗？
19az 2005-04-15
- 打赏
- 举报
我以前也曾遇到此问题，但一直未得到解决，似乎没有更好的办法解决
我当时的处理办法是： 采用实现准备好的一个默认图片，也就是说不管预览哪一条信息，都显示的是该图片，因为重点看的不是图片的效果，而是图片在整个页面中的显示效果，所以弄一个图片填充即可……
我当时的处理办法是： 采用实现准备好的一个默认图片，也就是说不管预览哪一条信息，都显示的是该图片，因为重点看的不是图片的效果，而是图片在整个页面中的显示效果，所以弄一个图片填充即可……
