jquery实现gmail那样的直接上传效果

在GMAIL中,实现文件上传时,是点一个UPLOAD连接时,就直接打开了文件浏览框选择用户的文件的,这个效果跟传统的上传效果有点不同,但实际上,可以很容易去通过jquery去实现这个功能了,下文假设是使用ASP.NET+JQUERY的方法,其他PHP,JAVA的实现原理基本是一样的
1 上传真正的部分,其实还是传统的文件上传框,即:
  <asp:Label ID="lblMessage" runat="server" ForeColor="Green" />
        <asp:FileUpload ID="FileUpload1" runat="server" ClientIDMode="Static" style="display:none;"  />
        <asp:Button ID="btnSubmit" ClientIDMode="Static" runat="server" Text="Submit" OnClick="UploadFileToServer" style="display:none;"   />
   如果是其他语言比如JSP,PHP的话,那么则只需要在
<input type="file"...../>以及button这里加上style="display:none;"
就可以了.

2 增加一个iframe,设置为隐藏:
     <a href="javascript:void(0)" title="Upload File" onclick="OpenFileUpload()">Upload</a>
        <iframe id="frameUpload" name="frameUpload" src="FileUpload.aspx" frameborder="0" width="0" height="0" />

3 JQUERY部分代码
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        function OpenFileUpload()
        {
            var myFrame = document.getElementById('frameUpload');
            $(myFrame).focus();
            $(myFrame).contents().find("#FileUpload1").click();
            var value = $(myFrame).contents().find("#FileUpload1").val();
            if ( value != '')
            {
                $(myFrame).contents().find("#btnSubmit").click();
              


            }
        }
    </script>

  实际上就是先把IFRAME找出来,然后再把文件上传框FileUpload1找出来,运行其CLICK事件,这样实际上就出现了传统的用户浏览文件框了,再用户选择了要上传的文件后,然后获得其上传的内容,这里放入VALUE,如果VALUE不空,就是有上传文件的话,则JQUERY
找出其真实上传文件程序中的那个"上传"的按钮,调用其CLICK的事件,这样就完成了上传了.

当然,ASP.NET中的后端上传事件如下:
protected void UploadFileToServer(object sender, EventArgs e)
    {
String driver="e:\\aspnet\\";
string fileName = FileUpload1.FileName;
        FileUpload1.SaveAs(driver +  fileName);
        lblMessage.Text = FileUpload1.PostedFile.FileName + " uploaded successfully !";
      
    }