建立基于Ajax样式的文件上传

整理日期：2007年08月16日【字体：大中小】

伊图教程网[www.etoow.com]
http://www.etoow.com/html/2007-08/1187271939.html

　　　　　　　　　　　　<td id="tdProgress4">   </td>

　　　　　　　　　　　　<td id="tdProgress5">   </td>

　　　　　　　　　　　　<td id="tdProgress6">   </td>

　　　　　　　　　　　　<td id="tdProgress7">   </td>

　　　　　　　　　　　　<td id="tdProgress8">   </td>

　　　　　　　　　　　　<td id="tdProgress9">   </td>

　　　　　　　　　　　　<td id="tdProgress10">   </td>

　　　　　　　　　　</tr>

　　　　　　　　</tbody>

　　　　　　</table>

　　　　</div>

　　</div>

</fieldset>

正如你所看到的，我使用了一些div来显示或者隐藏上传页面的信息与进度，并且最为重要的是我在iframe的onload事件里绑定了initPhotoUpload方法，下面就看看iframe对应页面的内容

<form id="photoUpload" enctype="multipart/form-data" runat="server">

　　<div>

　　　　<input id="filPhoto" type="file" runat="server"/>

　　</div>

Tags：

建立基于Ajax样式的文件上传
'http://www.etoow.com/html/2007-08/1187271939.html

2 3 4 5

最新文章教程

建立基于AJAX样式的文件上传

　如果你访问ASP.NET AJAX 论坛，你会发现有成百的人询问当把File控件放到UpdatePanel里时，并不能够产生具有AJAX上传的效果。这肯定是不能够产生AJAX效果的，因为XMLHTTPRequest对象在内部上传数据时不支持这个功能。在本文我将给大家演示一个具有AJAX效果的文件上传方式。技巧很简单，我将使用iframe框架来上传文件，这样就不会刷新页面，并且在页面上传过程中，他还会粗略的显示进度，下面是运行的截图

下面让我们详细介绍一下执行过程。就从main页面开始吧

<fieldset>

　　<legend>Photo Upload Demo</legend>

　　<div id="divFrame">

　　　　<iframe id="ifrPhoto" onload="initPhotoUpload()" scrolling="no" frameborder="0" hidefocus="true" style="text-align:center;vertical-align:middle;border-style:none;margin:0px;width:100%;height:55px" src="PhotoUpload.aspx"></iframe>

　　</div>

　　<div id="divUploadMessage" style="padding-top:4px;display:none"></div>

　　<div id="divUploadProgress" style="padding-top:4px;display:none">

　　　　<span style="font-size:smaller">Uploading photo...</span>

　　　　<div>

　　　　　　<table border="0" cellpadding="0" cellspacing="2" style="width:100%">

　　　　　　　　<tbody>

　　　　　　　　　　<tr>

　　　　　　　　　　　　<td id="tdProgress1">   </td>

　　　　　　　　　　　　<td id="tdProgress2">   </td>

　　　　　　　　　　　　<td id="tdProgress3">   </td>