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

2009-03-03 03:53:36 2.3k 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

C#.NET文件上传的入门学习（FileUpload控件的入门学习）上传文件，如果你没有学习过，可能会觉得很难，但是如果你知道我是怎么实现的话，我想啊，你做梦都会笑，因为那也太简单了。当然拉，我这里完全是入门级的例子。也只限于完全没有思路的同僚来学习的。因为这里没有做任何的限制，就只是简单的上传，更深入的学习当然还是需要大家再去努力学习了。我啊，喜欢抛砖引玉，希望以这样的方式跟大家一起学习。如果你也是一样刚入门的话，我想啊，咱们就是知音。我阅读详情

我要上传一个图片

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

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

让 img显示选择的图片。

这个功能如何实现？

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

...全文

用FileUpload实现多个文件同时上传使用FileUpload实现多个文件同时上传的例子，方法很多，这是一个简单一点的方法。下面就是主要的界面，大家可以参考一下。下面我们来解释他的实现方法：首先我们看一下界面，开始界面上有个Panel1，里面有个FileUpload控件，然后在Panel1外面有个TextBox控件，一个Button按钮，用来实现增加FileUpload控件的，还有一个Button按钮是用来实现上传功能的。看一些界面源阅读详情

lifeixie

.NET社区 62,272 成员 668,968 内容

+ 关注 + 加入社区

切换为时间正序

keeweihan 2010-10-03

打赏
举报

这么多滥竽充数的人，LZ问的是WEB控件FILEUPLOAD，都说INPUT干什么？

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

所以，很多人都是在这里扯淡。。。网上很多关于这个的资料都是乱转。一塌糊涂。

happy664618843 2010-04-20

打赏
举报

IE Firefox兼容http://blog.csdn.net/happy664618843/archive/2010/01/29/5271315.aspx

happy664618843 2010-04-20

打赏
举报

http://blog.csdn.net/happy664618843/archive/2010/01/29/5271315.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">

</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）

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

相关推荐

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