本文给大家介绍iframe无刷新上传文件，通过一个隐藏的iframe来处理上传操作我采用的是ReactJS,amazeui,nodejs1.html target指向iframe的name,就是把上传后的操作交给iframe来处理
在现代Web开发中，为了提供更好的用户体验，无刷新上传文件功能变得越来越常见。无刷新上传文件的核心在于在不重新加载整个页面的情况下完成文件上传过程。本文将深入探讨如何利用隐藏的`iframe`来实现这一功能，同时结合ReactJS、AmazeUI和Node.js进行详细阐述。
1. **iframe无刷新上传基础**
`iframe`（Inline Frame）是HTML中的一个元素，它允许在一个HTML文档中嵌入另一个HTML文档。在无刷新上传文件的场景下，我们创建一个隐藏的iframe，用于接收服务器返回的信息，从而避免整个页面的刷新。这是因为表单提交默认会在当前页面显示服务器响应，而通过设置`target`属性为iframe的`name`值，我们可以指定表单提交到iframe，使得响应在iframe内部处理，用户看不到页面变化。
2. **ReactJS组件实现**
在ReactJS中，我们可以创建一个表单组件来处理文件上传。例如，下面的代码展示了如何创建一个包含文件选择按钮的表单，并在文件选择后提交表单：
```jsx
import React from 'react';
class FileUploader extends React.Component {
UploadSupplyer = () => {
const path = document.getElementById('fileUp').value;
if (!path) return false;
$('.loadinfo').html('<p>文件上传中...</p>').removeClass("none");
document.getElementById('supplyformFile').submit();
}
render() {
return (
<form id="supplyformFile" name="formFile" method="post" target="frameFile" encType="multipart/form-data">
<div className="am-form-file">
<button type="button" className="am-btn am-btn-default am-btn-sm">
<i className="am-icon-cloud-upload"></i> 选择要上传的文件
</button>
<input type="file" id="fileUp" onChange={this.UploadSupplyer} name="fileUp" />
</div>
<div id="supplyfile_div"></div>
</form>
<iframe id="frameFile" name="frameFile" style={{ display: 'none' }}></iframe>
<input type="hidden" id="supplyfile" />
);
}
}
export default FileUploader;
```
这个组件包含一个`input[type=file]`，用户选择文件后触发`onChange`事件，调用`UploadSupplyer`函数提交表单。
3. **Node.js服务器处理**
在服务器端，我们需要接收并处理文件上传。以Node.js为例，可以使用`express`和`multer`中间件来处理文件上传。当文件上传完成后，我们需要向父页面（即包含iframe的页面）发送一个消息，告知文件上传成功。在Node.js中，可以这样实现：
```javascript
const express = require('express');
const multer = require('multer');
const upload = multer({ dest: 'public/files/' });
app.post('/upload', upload.single('fileUp'), (req, res) => {
const fname = req.file.path.replace("publicfiles", "").replace("public/files/", "");
res.writeHead(200, { 'Content-type': 'text/html' });
res.write('<script>');
res.write('window.parent.postMessage("' + fname + '", "*");');
res.end('</script>');
});
```
通过`postMessage`方法，我们将文件路径作为消息发送回客户端。
4. **前端接收上传结果**
在浏览器端，我们需要监听`message`事件来接收服务器返回的消息。一旦接收到消息，我们更新隐藏的`input[type=hidden]`的值，并展示上传成功的提示。以下是一个简单的示例：
```javascript
window.addEventListener('message', (e) => {
const fname = e.data;
$('#supplyfile').val(fname);
$('.loadinfo').addClass("none");
$('.successinfo').html('<p>文件上传成功</p>').removeClass("none");
setTimeout(() => {
$('.successinfo').addClass("none");
}, 2000);
$('#supplyfile_div').html(
'<span class="am-icon-file-o"></span> <a target="_blank" href="' + hosts + '/files/' + fname + '">供应商确认单</a>'
);
}, false);
```
当用户点击链接时，可以在新窗口中查看已上传的文件。
总结来说，通过隐藏的iframe实现无刷新上传文件，主要涉及以下几个步骤：创建一个隐藏的iframe，使用ReactJS构建上传表单组件，使用Node.js处理文件上传并发送消息到客户端，以及在客户端监听`message`事件处理上传结果。这种方法既避免了页面刷新，又提供了良好的用户体验。虽然现在有更多现代化的方法如使用Ajax和WebSockets，但iframe方案在某些场景下仍然是一种可行的选择。
