这是《大胖小课》栏目的专题一《说说文件上传那些事儿》的第3节-《不用 js 实现文件无刷新上传》
专题已经更新章节：
《大胖 • 小课》- 我是这样理解文件上传的
《大胖 • 小课》- 写一个 node 的文件上传接口
上一节，我们实现了一个简单的文件上传接口，服务端的文件保存我们使用koa-body来完成。
从这节开始我们开始进行梳理前端各种文件上传的场景。
既然要说不用js实现文件无刷新上传，那就要先说说最原始的文件上传，也就是在ie时代是怎么处理的。
最原始的文件上传
使用 form 表单上传文件
在ie时代，如果实现一个无刷新的文件上传那可是费老劲了，大部分都是用 iframe 来实现局部刷新或者使用 flash 插件来搞定，在那个时代ie就是最好用的浏览器（别无选择）。
DEMO
这种方式上传文件，不需要 js ，而且没有兼容问题，所有浏览器都支持，就是体验很差，导致页面刷新，页面其他数据丢失。
HTML
<form method="post" action="http://localhost:8100" enctype="multipart/form-data">选择文件:<input type="file" name="f1"/> input 必须设置 name 属性，否则数据无法发送<br/><br/>标题：<input type="text" name="title"/><br/><br/><br/><button type="submit" id="btn-0">上 传</button></form>
多文件上传
在ie时代的多文件上传是需要创建多个input file标签，现在html5只需要一个标签加个属性就搞定了,file标签开启multiple。
DEMO
HTML
//设置 multiple属性<input type="file" name="f1" multiple/>
NODE
文件上传接口也需要进行简单的调整，由单文件对象的获取变为多文件数组，然后进行遍历处理。
//中间件处理文件重命名app.use((ctx) => {var files = ctx.request.files.f1;// 多文件， 得到上传文件的数组var result=[];//遍历处理files && files.forEach(item=>{var path = item.path;var fname = item.name;//原文件名称var nextPath = path + fname;if (item.size > 0 && path) {//得到扩展名var extArr = fname.split('.');var ext = extArr[extArr.length - 1];var nextPath = path + '.' + ext;//重命名文件fs.renameSync(path, nextPath);//文件可访问路径放入数组result.push(uploadHost+ nextPath.slice(nextPath.lastIndexOf('/') + 1));}});//输出 json 结果ctx.body = `{"fileUrl":${JSON.stringify(result)}}`;})
CODE
/Bigerfe/fe-learn-code/tree/master/src/upfiles-demo/demo2
局部刷新(不用 js 的无刷新上传) - iframe
这里说的是在ie时代的上传文件局部刷新，借助 iframe 实现。
DEMO
局部刷新
页面内放一个隐藏的iframe，或者使用js动态创建，指定form表单的target属性值为iframe标签 的name属性值，这样form表单的shubmit行为的跳转就会在iframe内完成，整体页面不会刷新。
拿到接口数据
然后为iframe添加load事件，得到iframe的页面内容，将结果转换为JSON对象，这样就拿到了接口的数据
HTML
<iframe id="temp-iframe" name="temp-iframe" src="" style="display:none;"></iframe><form method="post" target="temp-iframe" action="http://localhost:8100" enctype="multipart/form-data">选择文件(可多选):<input type="file" name="f1" id="f1" multiple/><br/> input 必须设置 name 属性，否则数据无法发送<br/><br/>标题：<input type="text" name="title"/><br/><br/><br/><button type="submit" id="btn-0">上 传</button></form><script>var iframe = document.getElementById('temp-iframe');iframe.addEventListener('load',function () {var result = iframe.contentWindow.document.body.innerText;//接口数据转换为 JSON 对象var obj = JSON.parse(result);if(obj && obj.fileUrl.length){alert('上传成功');}console.log(obj);});</script>
NODE
服务端代码不需要改动，略.
CODE
/Bigerfe/fe-learn-code/tree/master/src/upfiles-demo/demo3
小结
本节主要是介绍了下在 ie 时代通常是怎样实现文件上传和无刷新上传的，虽然现在的大前端时代已经支持体验更好的方式实现，但是本质的原理都不会变，只是工具（浏览器）升级了。
作者 zz_jesse, 专注前端领域，深更原理和实现，目前在公司主要负责技术架构和团队管理。
个人开源项目 ：react ssr 开发骨架 Zz.js, /Bigerfe/koa-react-ssr
个人公众号：@《前端张大胖》 欢迎关注，深度好文以及各种福利在等你。
