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 !";
}
