关于asp上传图片前预览图片功能的实现????

2006-08-01 08:14:59 258 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

ASP.NET使用FileUpLoad控件上传图片前预览图片 aspx.cs" Inherits="Managerment" %><html xmlns="ht 阅读详情

<%
Dim uppath,filelx,formName,EditName
uppath="../img/"
formName=FormatSQL(SafeRequest("formName",0))
EditName=FormatSQL(SafeRequest("EditName",0))
%>
<html>
<head>
<title>图片上传</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">

</style>
<script language="javascript">

</script>
</head>

<body bgcolor="#FFFFFF" text="#000000">
<form name="form1" method="post" action="adb2b_upimgloadsyss.asp" enctype="multipart/form-data" >
<div id="esave" style="position:absolute; top:18px; left:40px; z-index:10; visibility:hidden">
<TABLE WIDTH=340 BORDER=0 CELLSPACING=0 CELLPADDING=0>
<TR><td width=20%></td>
<TD bgcolor=#104A7B width="60%">
<TABLE WIDTH=100% height=120 BORDER=0 CELLSPACING=1 CELLPADDING=0>
<TR>
<td bgcolor=#eeeeee align=center><font color=red>正在上传文件，请稍候...</font></td>
</tr>
</table>
</td><td width=20%></td>
</tr></table></div>
<table width="400" border="0" cellspacing="1" cellpadding="0" align="center" bgcolor="#f2f2f2">
<tr>
<td height="22" align="left" valign="middle" width="400"> 图片上传
<input type="hidden" name="filepath" value="<%=uppath%>">
<input type="hidden" name="filelx" value="<%=filelx%>">
<input type="hidden" name="EditName" value="<%=EditName%>">
<input type="hidden" name="FormName" value="<%=formName%>">
<input type="hidden" name="act" value="uploadfile">
</td>
</tr>
<tr align="center" valign="middle" bgcolor="#FFFFFF">
<td align="left" id="upid" height="80" width="400"> 选择文件:
<input type="file" name="file1" style="width:300'" class="tx1" value="">
</td>
</tr>
<tr align="center" valign="middle">
<td height="24" width="400">
<input type="submit" name="Submit" value="上传 " class="input_bot" onClick="javascript:mysub()">
</td>
<tr>
<td>
<IMG SRC=../<%=uploadfile%> BORDER="0">*****显示预览图片******
</td>
</tr>
</tr>
</table>
</form>
</body>
</html>

大家好,这是一个上传图片的页面,我想在里面加上一个预览图片的功能,就是选完路径后在下面显示相应图片的效果图,有人告诉我可以怎么实现吗?谢谢
谢谢!!

...全文

支持预览功能的图片上传控件查看代码>> 在实际开发中经常需要从客户端上传图片到服务器，但FileUpload并不能提供图片的预览功能，本文介绍如何开发一个支持图片预览功能的图片上传组件（注：图片上传预览功能也可以通过JavaScript客户端脚本实现，本文采用的方式是服务器预存储图片的预览方式）。我们希望该控件具备如下功能：具备两种UI视图，分别为预览视阅读详情

sueifeng1026

ASP 28,401 成员 356,940 内容

+ 关注 + 加入社区

切换为时间正序

hurrayboy 2006-08-07

打赏
举报

路过。。。

龙宜坡 2006-08-07

打赏
举报

记号！

jinjuduo 2006-08-01

打赏
举报

可预览缩略图（实时预览）的上传图片界面

<script language=JavaScript>
var flag=false;
function DrawImage(ImgD){
var image=new Image();
image.src=develop//develop/ImgD.src;
if(image.width>0 && image.height>0){
flag=true;
if(image.width/image.height>= 120/80){
if(image.width>120){
ImgD.width=120;
ImgD.height=(image.height*120)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
else{
if(image.height>80){
ImgD.height=80;
ImgD.width=(image.width*80)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
}
/**//*else{
ImgD.src="";
ImgD.alt=""
}*/
}

function FileChange(Value){
flag=false;
document.all.uploadimage.width=10;
document.all.uploadimage.height=10;
document.all.uploadimage.alt="";
document.all.uploadimage.src=/develop/Value;
}

function BeforeUpLoad(){
if(flag) alert("OK");else alert("FAIL");
}
</script>
<INPUT style="WIDTH: 143px; HEIGHT: 18px" type=file size=8 name=pic onchange="javascript:FileChange(this.value);">
<IMG id=uploadimage height=10 width=10 src="" onload="javascript:DrawImage(this);" ><BR>
<Button onclick="javascript:BeforeUpLoad();">提交</Button>

www_7di_net 2006-08-01

打赏
举报

leohuang 2006-08-01

打赏
举报

上面的有问题,换这个function
===========================================================================
<script language="javascript">
function PreviewImg(obj){
var div = document.getElementById("previewDiv");
if(obj.value==""){
div.removeChild(div.firstChild);
return
}
if(div.childNodes.length>0){
div.firstChild.src=obj.value;
div.firstChild.removeAttribute("width");
div.firstChild.removeAttribute("height");
}
else{
var img = document.createElement("img");
img.border=0;
img.src=obj.value;
div.appendChild(img);
}
}
</script>

leohuang 2006-08-01

打赏
举报

Like this
---------------------------------------------------------------------------------

<input type="file" name="file1" style="width:300'" class="tx1" value="" onchange="PreviewImg(this);">

<div style="width:400px;height:300px;border:1px solid #aaaaaa;overflow:auto" id="previewDiv">

</div>
<script language="javascript">

function PreviewImg(obj){
var div = document.getElementById("previewDiv");
if(obj.value==""){
div.removeChild(div.firstChild);
return
}
if(div.children>0)
div.firstChild.src=obj.value;
else{
var img = document.createElement("img");
img.border=0;
img.src=obj.value;
div.appendChild(img);
}
}
</script>

Aricc 2006-08-01

打赏
举报

楼上的不行吧！虽然引号里的看起来象是Js脚本，但毕竟是在引号里啊。

<img id="img1" src="demo.jpg">

<script language="javascript">
function preview(){
img1.src=fileinputbox.value;
}
</script>

在适当的时候调用preview()

liudianhalf 2006-08-01

打赏
举报

加个img src="inputtextbox.value"看看

关于asp上传图片前预览图片功能的实现????

相关推荐