.NET基础之FileUpload控件进阶(一)

1.隐藏控件两种办法：

改变控件样式：style="display: none"

在javascript中写入：document.getElementById("FileUpload1").style.display="inline";

2.点击按钮控件实现激活FileUpload控件

页面源代码：添加一个FileUpload控件，一个Input(File)控件
<input id="Button1" type="button" value="button" onclick="Button1_onclick()" />
<asp:FileUpload ID="FileUpload1" runat="server"   /> 
添加javascript，Button1的onclick事件

<script language="javascript" type="text/javascript"> 
// <!CDATA[ 

function Button1_onclick() { 
//点击后激活FileUpload1 
document.getElementById("FileUpload1").click(); 
} 
// ]]> 
</script>

3.FileUpload控件选定文件后在页面上及时显示文件客户端路径

页面源代码：添加一个Label 控件
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
添加javascript

<script language="javascript" type="text/javascript"> 
// <!CDATA[ 
function   label_text(){  
var filePath   =   document.getElementById("FileUpload1").value; 
document.getElementById("Label1").innerHTML=filePath; 
} // ]]> 
</script> 

页面cs代码：

protected void Page_Load(object sender, EventArgs e) 
{ 
     this.FileUpload1.Attributes.Add("onchange",   "label_text();"); //添加处理函数
}

4.FileUpload控件选定图片后在页面上及时预览图片

页面源代码：添加一个Image控件, 一个FileUpload控件

<asp:FileUpload ID="FileUpload1" runat="server" onpropertychange="show(this.value)"/>
<asp:Image ID="Image1" runat="server" />
添加javascript

<script language="javascript" type="text/javascript"> 

function show(id) 
{  
     //将FileUpload取得的图片客户端路径给传值给Image1.src 
      document.getElementById("Image1").src=id; 
} 
</script>

5.FileUpload控件选定图片后在页面上及时预览图片（通过滤器实现）

页面源代码：添加一个div
<div id="divview" style="filter : progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);WIDTH: 166px; HEIGHT: 190px">
<!--用于显示图片-->
</div>
<asp:FileUpload ID="FileUpload1" runat="server" onpropertychange="show(this.value)"/>
添加javascript

<script type="text/javascript"> 
function show(upimg) 
{ 
    var dd=document.getElementById("divview"); 
    dd.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = upimg; 
    dd.style.width = 166; 
    dd.style.height = 190; 
    dd.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = 'scale'; 
} 
</script>

6.动态添加FileUpload控件

页面源代码：添加一个TextBox控件 ，一个Panel控件
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Panel ID="Panel1" runat="server"></asp:Panel>
页面cs代码：

FileUpload fu;  
for (int i = 0; i < Convert.ToInt32(TextBox1.Text); i++) 
{   
       //读取TextBox1需要的FileUpload个数，循环产生添加 
       fu = new FileUpload();  
       fu.ID = "fu_" + i.ToString();  
       Panel1.Controls.Add(fu);  
} 

7.批量上传文件 
页面cs代码：

string f_name, f_size, f_type; 
//Request.Files：获取采用多部分MIME格式的由客户端上载的文件的集合 
HttpFileCollection hfc = Request.Files;  
for (int i = 0; i < hfc.Count; i++) 
{ 
     //HttpPostedFile ：提供对客户端已上载的单独文件的访问 
     HttpPostedFile hpf = hfc[i]; 
     //返回指定路径字符串的文件名和扩展名 
     f_name = Path.GetFileName(hpf.FileName); 
     //获取上载文件的大小 
     f_size = hpf.ContentLength.ToString(); 
     //获取客户端发送的文件的MIME内容类型 
     f_type = hpf.ContentType; 
     //将上传文件保存到服务器上指定路径 
     hpf.SaveAs(Server.MapPath("~/up/")+f_name);   
     Response.Write(f_name + "<br>" + f_size + "<br>" + f_type + "<br>"); 
}