本文实例讲述了php+iframe 实现上传文件功能。分享给大家供大家参考，具体如下：
我们通过动态的创建iframe，修改form的target，来实现无跳转的文件上传。
具体的实现步骤
1.捕捉表单提交事件
2.创建一个iframe
3.修改表单的target,指向iframe
4.删除iframe
file.html代码如下：
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="upfile.php" met
在网页开发中，有时我们需要实现文件上传功能，但又不希望页面发生跳转，以保持用户界面的连贯性。在这种情况下，可以使用PHP结合HTML的iframe元素来实现实时上传文件并显示结果。以下是对这个技术的详细解释：
### 1. 什么是iframe？
iframe（Inline Frame）是HTML中的一个标签，它允许我们在一个网页内嵌入另一个网页。通过iframe，我们可以将不同的HTML文档嵌入到主页面中，实现页面内容的动态加载和更新，而不会影响到整个页面的其他部分。
### 2. 实现步骤
#### 步骤1：捕捉表单提交事件
我们需要创建一个包含文件上传输入框的HTML表单。在表单中设置`enctype="multipart/form-data"`以支持文件上传。同时，为表单绑定一个JavaScript的提交事件监听器，用于处理文件上传的逻辑。
```html
<form action="upfile.php" method="post" id="upfileForm" enctype="multipart/form-data">
<input type="file" name="file" />
<input type="submit" name="submit" value="上传" />
</form>
```
#### 步骤2：创建iframe
当表单提交事件触发时，我们需要动态创建一个iframe。这个iframe将作为文件上传的目标，使得文件上传过程在后台进行，用户界面不会发生跳转。我们给iframe一个随机的名字以避免冲突，并将其设置为不可见。
```javascript
var ifrName = 'upfile' + Math.random();
var ifr = $("<iframe name='" + ifrName + "' width='0' height='0' frameborder='0'></iframe>");
$("body").append(ifr);
```
#### 步骤3：设置form的target
接下来，我们将表单的`target`属性设置为刚创建的iframe的名称，这样表单提交后，数据就会发送到这个iframe中。
```javascript
$(this).attr("target", ifrName);
```
#### 步骤4：删除iframe（可选）
在某些情况下，为了节省资源，我们可能希望在文件上传完成后删除iframe。然而，在此示例中，我们没有展示这一步，因为iframe通常会持续存在，直到页面被刷新或关闭。
### 3. PHP处理文件上传
在服务器端，PHP接收上传的文件并保存到指定目录。这里，我们定义了上传目录`$uploadDir`，确保其存在，然后将文件移动到该目录下。如果文件成功上传，我们将通过iframe返回一个JavaScript脚本，更新页面上的结果。
```php
<?php
$uploadDir = './upload/';
if (!file_exists($uploadDir)) {
@mkdir($uploadDir, 0777, true);
}
$uploadFile = $uploadDir . basename($_FILES['file']['name']);
if (move_uploaded_file($_FILES['file']['tmp_name'], $uploadFile)) {
echo "<script>parent.document.getElementById('result').innerHTML='OK';</script>";
} else {
echo "<script>parent.document.getElementById('result').innerHTML='NO';</script>";
}
?>
```
### 4. 页面交互
在前端，我们需要一个容器来显示上传结果。在这个例子中，我们有一个id为`result`的`div`，JavaScript会根据PHP返回的脚本来更新这个`div`的内容。
```html
<div id="result"></div>
```
### 5. 其他注意事项
- 文件上传的安全性：确保检查上传文件的类型和大小，以防止恶意文件上传。
- 错误处理：在PHP代码中添加适当的错误处理，以便在文件上传失败时提供反馈。
- 跨域问题：如果文件上传涉及到跨域请求，需要考虑CORS策略。
通过这样的实现方式，我们可以实现一个无刷新、无跳转的文件上传功能，提升用户体验。这种技术在很多Web应用中都有应用，尤其是在需要实时反馈的场景下。
