用FileUpload点浏览 选择 玩文件 确定后,触发事件问题

lifeixie 2009-03-03 03:53:36
我要上传一个 图片

有一个 FileUpload 控件 ,一个 图片框 或者 img

我想要的效果是 点 浏览 然后选择图片,选择完图片后确定后,这时候

让 img显示 选择的图片。

这个功能如何实现?

FileUpload 可以在选完 文件确定后, 触发某一个事件么?如果不能怎么实现啊?请教

...全文
2269 24 打赏 收藏 转发到动态 举报
写回复
用AI写文章
24 条回复
切换为时间正序
请发表友善的回复…
发表回复
keeweihan 2010-10-03
  • 打赏
  • 举报
回复
这么多滥竽充数的人,LZ问的是WEB控件FILEUPLOAD,都说INPUT干什么?

然道楼主在.ASPX页面中运行真能实现效果? 如果不把图片放在项目里,读取本地图片是根本显示不了的。

所以,很多人都是在这里扯淡。。。网上很多关于这个的资料都是乱转。一塌糊涂。
happy664618843 2010-04-20
  • 打赏
  • 举报
回复
onpropertychange="document.getElementById('img1').src=this.value"
tangxiaofeng2008 2010-04-20
  • 打赏
  • 举报
回复
别人问的是FileUpload,你们大多数都是回答<input type="file
云想慕尘 2009-03-06
  • 打赏
  • 举报
回复
在FileUpload控件onChange事件中调用js方法实现预览,选择图片前img不显示,选择图片后img的display改为真,
若上传的不是图片给出提示,然后把FileUpload的value清空

html代码
<asp:FileUpload ID="fuCover" runat="server" onChange="showPic(img,this)" />
<img alt="预览" id="img" src="" style="display:none;" width="120" />

javascript代码
function showPic(pic,path)
{//判断所选文件是否符合格式
pic.style.display="";
var flag=0;//状态
var aa=".gif|.jpg|.jpeg|.bmp|.png";//筛选的图片的扩展名
var bb=aa.split('|');//分离可通过的图片扩展名
for(var i=0;i<bb.length;i++){//循环判断路径扩展名是否为图片
var cc=path.value.toLowerCase().indexOf(bb[i]);
if(cc>0){
//如果是图片,状态为1
flag=1;
pic.src=path.value;
pic.style.display="";
break;
}
}
if(flag==0){//如果状态为0,弹出提示框
alert("暂不支持您所选择的文件格式!");
path.outerHTML=path.outerHTML;//清空FileUpload的值
path.value="";
}
}
Terry717 2009-03-06
  • 打赏
  • 举报
回复
帮顶!
kingcsx666 2009-03-06
  • 打赏
  • 举报
回复
up楼上的
liujiayu10 2009-03-06
  • 打赏
  • 举报
回复
<input type="file" size="50" name="f" id="f1" onkeydown="event.returnValue=false;" onpaste="return false;" onchange="YZfile(this)">


<script type="text/javascript" language="javascript">
<!--
var filetype="<%=filetype %>";
var i=1;
function YZfile(obj){
var a = obj.value.lastIndexOf(".");
var b = obj.value.substring(a);
var c = "|"+filetype+"|";
var d = c.indexOf("|"+b.substring(1).toLowerCase()+"|");
if(d==-1){
alert("不允许上传此类型文件!\n允许上的文件类型:"+filetype);
document.getElementById(obj.id).outerHTML = document.getElementById(obj.id).outerHTML;
//document.getElementById(obj.id).select();
//document.selection.clear();
}
}
//-->
</script>
conan19771130 2009-03-06
  • 打赏
  • 举报
回复
up.可以,2楼就行
qq2013 2009-03-06
  • 打赏
  • 举报
回复
[Quote=引用 7 楼 kingya2008 的回复:]
引用 1 楼 wanghao3616 的回复:
<img id="img1" onerror="this.src='default1.gif'">
<input type="file" onchange="img1.src=this.value">

这个就可以了
[/Quote]
ding
白云任去留 2009-03-06
  • 打赏
  • 举报
回复
this.FileUpload1.Attributes.Add("onchange", "document.getElementById('IMG1').src = document.getElementById('FileUpload1').value;");
蝶恋花雨 2009-03-05
  • 打赏
  • 举报
回复
<asp:ImageButton style="cursor:pointer" ID="iUpLoad" runat="server" ImageUrl="上传图片" onclick="iUpLoad_Click"/>

蝶恋花雨 2009-03-05
  • 打赏
  • 举报
回复
 <input type="file"  runat="server" style="height:22px; width:220px;" onchange="PhotoType();"   id="fUpLoad" />
<input type="hidden" id="HFurl" runat="server" /> </td>
<td align="left" >
<asp:ImageButton style="cursor:pointer" ID="iUpLoad" runat="server" ImageUrl="上传图片" Enabled="false" onclick="iUpLoad_Click"/>

<img src="../images/previewphoto.gif"(预览图片) style="cursor:pointer" onclick='ShowPhoto()' />

<img alt="" src=" " height="297" id="iShowPhoto" width="297" />要显示的图片


 function PhotoType() {
var x = $("<%=fUpLoad.ClientID %>");
if (!x || !x.value) return;
var patn = /\.jpg$|\.jpeg$|\.gif$/i;
if (patn.test(x.value)) {//如果已经选择了并且类型是图片则浏览不可用
$("<%=iUpLoad.ClientID%>").disabled = false;
}
else {
alert('允许上传图片格式:GIF|JPG|JPEG|。');
$("<%=iAddPhoto.ClientID%>").disabled = false;
}
if (x.value == "" & x.value == null) { alert('请选择要上传的图片。'); }
}
function ShowPhoto() {
$("iShowPhoto").src = "";
$("iShowPhoto").src = $("<%=HFurl.ClientID %>").value;
}


 /// <summary>
/// 上传图片并显示出来/并保存到隐藏域路径.以待点击预览图片查看图片
protected void iUpLoad_Click(object sender, ImageClickEventArgs e)
{
string test = Server.MapPath("~/CaseImages"); //用来生成文件夹
if (!Directory.Exists(test))
{
Directory.CreateDirectory(test);
}
int filesize = 4096;
if (fUpLoad.PostedFile.FileName != "")
{
if (fUpLoad.PostedFile.ContentLength / 1024 > filesize)
{
RegisterStartupScript("Startup", "<script>alert('单张图片不能超过4M,请重新选择图片。');</script>");
}
else
{
string imgname = fUpLoad.PostedFile.FileName;
string imgType = imgname.Substring(imgname.LastIndexOf(".") + 1);
string quanname = Guid.NewGuid() + "." + imgType;
string imgurl = "~/CaseImages/" + quanname;
fUpLoad.PostedFile.SaveAs(Server.MapPath(imgurl));
this.HFurl.Value = "../../CaseImages" + "/" + quanname;
}
}
}

willzeib 2009-03-05
  • 打赏
  • 举报
回复

string strImg = "javascript:this.document.getElementById('Image1').src='file:///'+this.value";
FileUpload1.Attributes.Add("onchange", strImg);
叶子 2009-03-03
  • 打赏
  • 举报
回复

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>

<script language="javascript">
function PreviewPhotoatwidth(photo_file,img_object)
{
img_object.src=photo_file.value;
}
</script>

</head>
<body>
<form id="form1" runat="server">
<table>
<tr>
<td>
<input name='File' size='50' type='file' onchange='javascript:PreviewPhotoatwidth(this,picpreview)'>
</td>
</tr>
<tr>
<td align="left">
<img id="picpreview" alt="预览" runat="server" />
</td>
</tr>
</table>
</form>
</body>
</html>
zhong2006 2009-03-03
  • 打赏
  • 举报
回复
<INPUT id="FilePhoto" style="WIDTH: 224px; HEIGHT: 22px" type="file" onchange="javascript:PhoTo(this);"   <div id="newPreview"> </div> 


<script language="javascript">
function PhoTo(imgFile)
{var newPreview=document.getElementById("newPreview");
newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src =imgFile.value;
newPreview.style.width = "133px";
newPreview.style.height = "162px";
}
</script>
kingya2008 2009-03-03
  • 打赏
  • 举报
回复
[Quote=引用 1 楼 wanghao3616 的回复:]
<img id="img1" onerror="this.src='default1.gif'">
<input type="file" onchange="img1.src=this.value">
[/Quote]
这个就可以了
sujunjun 2009-03-03
  • 打赏
  • 举报
回复
前幾天自己實現的,呵呵

<INPUT id="FilePhoto" style="WIDTH: 224px; HEIGHT: 22px" type="file" onchange="javascript:PhoTo(this);" <div id="newPreview"></div>


<script language="javascript">
function PhoTo(imgFile)
{var newPreview=document.getElementById("newPreview");
newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src =imgFile.value;
newPreview.style.width = "133px";
newPreview.style.height = "162px";
}
</script>
lifeixie 2009-03-03
  • 打赏
  • 举报
回复
<img src="客户端图片地址">???
我浏览的时候 在选图片,然后打开,这个时候 怎么动态赋值给 src??
加载更多回复(4)

62,025

社区成员

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见,支持健康理性的辩论和互动,反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

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