最原始的文件上传
使用 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
https://github.com/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
https://github.com/Bigerfe/fe-learn-code/tree/master/src/upfiles-demo/demo3
小结
本节主要是介绍了下在 ie 时代通常是怎样实现文件上传和无刷新上传的，虽然现在的大前端时代已经支持体验更好的方式实现，但是本质的原理都不会变，只是工具（浏览器）升级了。
