在现代Web开发中，AJAX技术因其能够提供无刷新页面更新而广受欢迎。然而，当需要实现文件上传功能时，会遇到一些挑战。标准的XMLHttpRequest对象并不支持文件上传。为了解决这个问题，可以采用一种工作方式，即使用iFrame和JavaScript来模拟AJAX的文件上传行为。
在深入讨论文件上传之前，让先回顾一下HTML表单的基本概念。如果已经熟悉HTML表单，可以跳过这一部分。
表单提交主要有两种方式：第一种是通过点击提交按钮，如下所示：
<input type="submit" id="mySubmitButton" name="mySubmitButton" value="Submit Form" />
第二种方式是通过调用JavaScript代码来提交表单，如下所示：
function submitMyForm() {
var theForm = document.forms['myForm'];
theForm.submit();
}
HTML表单具有多个属性，这些属性指示表单应该如何提交。以下是一些这样的属性：
一旦页面被提交，无论是通过点击提交按钮还是调用JavaScript提交表单，浏览器都会检查表单的action属性，并加载该action指向的web页面，同时发送使用enctype属性指定的加密方法加密的表单内容。
将使用两个页面来实现这种技术。第一个页面包含HTML内容，包括文件上传控件。第二个页面包含服务器端代码，用于将文件保存到服务器。
首先，向第一个页面添加控件。当然，需要添加一个文件上传控件。此外，还将添加一个iFrame和一个表单。页面的HTML主体将如下所示：
<body>
<!-- 这是添加的表单 -->
<form id="myForm" name="myForm" target="myIFrame" method="post" action="SaveFile.aspx" enctype="multipart/form-data">
</form>
<!-- 这是页面默认添加的表单 -->
<form id="form1" runat="server">
<!-- 这是文件上传控件 -->
<input type="file" id="myFile" name="myFile" runat="server" />
<!-- 这是一个普通按钮，将用于调用JavaScript函数上传文件 -->
<input type="button" value="Upload File" />
<!-- 这是一个iFrame，表单将在此提交 -->
<iframe style="display: none;" id="myIFrame" name="myIFrame"></iframe>
</form>
</body>
请注意，将表单添加到了页面默认添加的表单之外。还设置了action属性为第二个页面的URL，如前所述。iFrame的样式设置为隐藏，因此在文件上传时不会注意到它。
现在，希望按钮调用一个JavaScript来提交表单并上传文件。为了实现这一点，将向页面添加一个JavaScript函数，并在按钮的点击事件中调用它。以下是JavaScript函数：
<script type="text/javascript">
function uploadFile() {
var theForm = document.forms['myForm'];
if (!theForm) theForm = document.myForm;
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
var theFile = document.getElementById("myFile");
theForm.appendChild(theFile);
theForm.submit();
}
}
</script>
第二个页面，SaveFile.aspx，包含在加载时保存文件的代码，如下所示：
protected void Page_Load(object sender, EventArgs e)
{
Request.Files["myFile"].SaveAs("path on the server to save the file");
}