在本文中，我们将深入探讨如何使用jQuery和iframe技术来实现一个AJAX文件上传的效果。这种方法在处理文件上传时尤其有用，因为传统的AJAX不支持文件的POST操作。通过结合jQuery和iframe，我们可以创建一个无刷新的用户体验，让用户感觉文件上传是即时完成的。
我们需要了解jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理和Ajax交互。在这个实例中，jQuery被用来监听按钮点击事件，处理表单提交，并更新页面内容。
1. **HTML 页面结构**：
HTML页面包含了一个表单，用于选择文件并提交，以及一个`div`元素用于显示上传进度。表单的`enctype`属性设置为`multipart/form-data`，这是上传文件所必需的。表单的`target`属性将被动态修改，以指向即将创建的iframe。
2. **jQuery 代码**：
jQuery的`$(function() {...})`是一个文档就绪（document ready）函数，确保在执行代码之前DOM已经加载完成。当用户点击"提交"按钮时，触发以下事件：
- 生成一个随机命名的iframe，并将其插入到body中。iframe的宽度和高度设为0，使其不可见。
- 修改表单的`target`属性，设置为新生成iframe的`name`值，这样表单提交会发生在iframe内，而不是当前页面。
- 提交表单，开始文件上传过程。
- 更新`#progress`元素的内容，显示一个加载动画，表示上传正在进行。
- 当iframe的`load`事件触发时（即文件上传完成后），更新`#progress`内容，显示“上传完毕”，并移除iframe。
3. **iframe 作用**：
如果rame作为表单的提交目标，服务器的响应会被加载到这个iframe中，而不会影响到父页面。这使得我们可以在后台处理文件上传，而不影响用户的交互。
4. **PHP 文件处理**：
在`upfile.php`中，我们使用PHP的`move_uploaded_file`函数将上传的文件移动到指定目录。如果文件成功上传，返回"OK"，否则返回"fail"。这里的代码假设服务器端已经配置了正确的文件上传权限和目录。
总结来说，使用jQuery和iframe实现的AJAX文件上传效果，可以提供一个无缝的用户体验，避免页面刷新，同时利用iframe处理文件上传的限制。这种方法在实际项目中非常实用，特别是在需要处理大文件或多个文件上传的场景下。当然，现代浏览器支持File API和FormData对象，可以更直接地使用纯AJAX进行文件上传，但对老版本浏览器的兼容性可能较差。因此，结合jQuery和iframe的方法仍然是一个可行的选择。
