Use asp.net2.0 to write a file upload system similar to Gmail

use asp.net2.0 to write a file upload system similar to Gmail

Original address: http://aspalliance.com/1441_Building_a_Gmail_Style_File_Uploading_System_using_ASPNET_20.1
Author: Jesudas Chinnathampi (Das)
Translator: Xing Bai

1. Introduction
2. About Input Html control
3. Use the IFRAME label
4. Working principle
5. Online Testing
6. Download
7. The Summary

1. Brief introduction
       A standard file upload program contains a text box, browse button and an uploaded OK button, use the browse button to eject the "File Selection" dialog box, select the appropriate file, and then click the Upload OK button from the client uploaded to the server side.
Next, look at the upload attachment processing in Gmai, if you are careful, you can find it in the process of uploading attachments, there is no browse button, just a name "Add Accessories" hyperlink, when you click on this link, the File Selection dialog box will appear, then you select a file, and click the "Open" button , the file has been uploaded successfully.
Gmail file upload and normal file upload is different is not browse and OK button. There are three main convenient places here. First of all, the user is just a mouse click (and not two times in the click to determine the upload), the second alternative to the text box and button only a beautiful hyperlink, friendly to the user. Thirdly, the uploaded file is uploaded to the server only after the user clicks on the button to open it.
This cool effect can also be achieved in your Web page, but unfortunately this method in this article can only work under IE.
Here's a specific look at how to achieve this effect:

2. About input HTMLControl
        First of all, to study the input HTMLControl
<input type=file> in the browser is a selection file browse button and a text box, let me explain the <input typ=file>html control, first of all its value properties are read-only because of the security of the browser, We can't use code to assign him a value, the only way we can just click the browse button and select a file to assign to him.
Another important aspect is that we cannot invoke click events for this control, such as:
< HTML >
< head >
< title > File Upload </title >
< SCRIPT language = "javascript" type = "Text/javascript" >
function Browse ()
{
Document.form1.myFile.click ();
Document.form1.submit ();
}
</script >
< body onload = "javascript:browse ();" >
< form ID = "Form1" runat = "server" >
< input type = "file" runat = "server" name = "MyFile" id = "MyFile" >
</form >
</Body >
</HTML >
In the code above, we tried to call the Brower function in the page load event, and when we ran this code, the "Select File" dialog box appeared when the page was loaded, but when you selected the file and clicked on the Open button in the dialog box, a JavaScript error occurred:-" Access is denied. " The reason for this error is document.form1.submit ();( I did not appear in the test when this JavaScript error, do not know what the reason, but to cause a dead loop if you know if you can leave a message below, explain.
If Gmail can do that, we can do it too. Thinking for a long time and read some related articles on the Internet, how to use the No browse button to upload files, and finally found that we can use two pages to complete it; a homepage containing <iframe> tags, and a page that the IFRAME points to.

3. Use <iframe> label
As I mentioned above, we need two pages to complete this technique.
The main Page main.aspx contains:
1) A Super connection
2) <iframe> label, SRC attribute points to upload.aspx
The Upload.aspx page contains
1 a <input type=file> HTML control (set to hidden Visibility=hidden)
2) A Submit button (IBID.)
When the user clicks the hyperlink in the main.aspx, we must call the onclick event of the <input type=file> control in upload.aspx and let him display the File selection dialog box. In order to submit this form, we must also invoke the OnClick event that hides the Submit button in upload.aspx, and this time there will be no JavaScript error of the last time, and you'll wonder why the same code works in a page with an IFRAME tag. And you can't run a page without an IFRAME tag. Confused.. But it did run successfully.
Here's the code for main.aspx.
<% @ Page Language = "C #" AutoEventWireup = "true" CodeFile = "Default2.aspx.cs" Inherits = "TEMP_DEFAULT2" %>

<! 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 > upload file </title >
< script type = "Text/javascript" >
function Browse ()
{
var ifupload;
Ifupload = Ifu.document.form1;
IfUpload.myFile.click ();
IfUpload.btnSubmit.click ();
}
</script >
< BODY >
< form ID = "Form1" runat = "server" >
< div >
< a href = "#" onclick = "javascript:browse ();" > Upload file </a >
< iframe src = "upload.aspx" frameborder = "0" id = "Ifu" name = "Ifu" ></iframe >
</div >
</form >
</Body >
</HTML >
Complete upload.aspx HTML code:
<% @ Page Language = "C #" AutoEventWireup = "true" CodeFile = "UpLoad.aspx.cs" Inherits = "Temp_upload"%& Gt

<! 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 > ifrme page </title >
< script type = "Text/javascript" >
function SubmitForm ()
{
Document.form1.submit ();
}
</script >
< script runat = "server" >
protected void Page_Load (object sender, EventArgs e)
{
if (Request.Files.Count = 1)
{
MyFile.PostedFile.SaveAs (Server.MapPath (".") +
"//myuploadfile.txt");
this. Lblmsg.text = "Success";
}
}
</script >

< BODY >
< form ID = "Form1" runat = "server" >
< div >
< input type = "file" runat = "server" id = "MyFile" name = "MyFile"
style = "Visibility:hidden;" />
< input type = "button" runat = "server" id = "btnsubmit" name = "Btnsubmit"
onclick = "javascript:submitform ();"   style = "Visibility:hidden;" />
< br/>< Asp:label ID = "lblmsg" runat = "server" ForeColor = "Red"
Font-size = "Medium" Font-bold = "true" ></Asp:label >
</div >
</form >
</Body >
</HTML > If you look at the code in Upload.aspx, you'll find that the Visibility property of the input Type=file control and the submit control in the page is set to hidden, so we don't see these two in IE Control, instead. We must need these two hidden controls to upload some files from the client to the server side.

4. Working principle
As you can see in the main.aspx code above, there is only one hyperlink named "Add File", his