原文地址:http://aspalliance.com/1441_Building_a_Gmail_Style_File_Uploading_System_using_ASPNET_20.1
作者:Jesudas Chinnathampi (Das)
译者:兴百放
1.简介
2.关于input Html Control
3.使用iframe标签
4.工作原理
5.在线测试
6.下载
7.摘要
1。简介
一个标准的文件上传程序包含一个文本框,浏览按钮和一个上传的确定按钮,使用浏览按钮来弹出”文件选择”对话框,选择相应的文件,之后点击上传确定按钮从客户端上传到服务器端。
接下来看一下Gmai中的上传附件处理,如果你细心的话,你可以发现它在处理上传附件的时候,没有浏览按钮,只是一个名叫”添加附件”的超级链接,当你点击这个链接,就会出现文件选择对话框,之后你选择一个文件,并且单击“打开”按钮,文件已经上传成功了。
Gmail的文件上传和平常的文件上传不同的就是没有浏览和确定按钮。这里主要有三个方便之处。首先,用户只是一次鼠标点击(而没有二次在点击确定上传),其二代替文本框和按钮的只有一个漂亮的超级链接,对用户很友好。其三,上传的文件只在用户点击打开按钮后就上传到了服务器。
您的Web页中也可以实现这种很酷效果,但是遗憾的是这篇文章中的这个方法只能在IE下工作。
下面具体的看一下怎样实现这种效果:
2。关于input HtmlControl
首先来研究一下Input HTMLControl
<input type=file>在浏览器中呈现的是一个选择文件浏览按钮和一个文本框,下面我来解释一下<input typ=file>HTML控件,首先它的值属性是只读的,因为出于浏览器的安全机制,我们不能使用代码来给他分配一个值,唯一的方法就是我们只能点击浏览按钮并且选择一个文件来给他分配。
另一个重要的方面是我们不能为此控件调用点击事件比如:
\n
<head>
<title>File Upload</title>
<script language=”javascript” type=”text/javascript”>
function Browse()
{
document.form1.myFile.click();
document.form1.submit();
}
</script>
</head>
<body onload=”javascript:Browse();”>
<form id=”form1″ runat=”server”>
<input type=”file” runat=”server” name=”myFile” id=”myFile”>
</form>
</body>
</html>\n