异步上传文件是为了更好的用户体验，是每个前端必须掌握的技能。这里我提出三点有关异步文件上传的方式。
使用第三方控件，如Flash,ActiveX等浏览器插件上传。
使用隐藏的iframe模拟异步上传。
使用XMLHttpRequest2来实现异步上传。
第一种使用浏览器插件上传，需要一定的底层编码功底，在这里我就不讲了，以免误人子弟，提出这点大家可以自行百度。
第二种使用隐藏的iframe模拟异步上传。为什么在这里说的是模拟呢?因为我们其实是将返回结果放在了一个隐藏的iframe中，所以才没有使当前页面跳转，感觉就像是异步操作一样。
先贴出代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-"> <title>隐藏的iframe上传文件</title> <script type="text/javascript" src="https://www.jb51.net/jquery路径..."></script> </head> <body> <iframe></iframe> <form action="/upload" enctype="multipart/form-data" method="post" target="frm" onsubmit="loading(true);"> <p>附件： <input type="file"></p> <p><input type="submit" value="异步上传"> <span>正在上传...</span></p> </form> <div></div> <script> // 上传完成后的回调 function uploadFinished(fileName) { addToFlist(fileName); loading(false); } function addToFlist(fname) { var temp = ["<p>", fname, "<button>删除</button>", "</p>" ]; $("#flist").append(temp.join("")); } function loading(showloading) { if (showloading) { $("#uptxt").show(); } else { $("#uptxt").hide(); } } </script> </body> </html>
这种技术有两个关键的地方:
1.form会指定target,提交的结果定向返回到隐藏的ifram中。(即form的target与iframe的name属性一致)。
2.提交完成后，iframe中页面与主页面通信，通知上传结果及服务端文件信息
如何与主页面通信呢?
我们用nodejs在接收完了文件后返回了一个window.parent.主页面定义的方法，执行后可以得知文件上传完成。代码很简单:
router.post('/upload', multipartMiddleware, function(req, res) { var fpath = req.files.myfile.path; var fname = fpath.substr(fpath.lastIndexOf('\\') + ); setTimeout(function() { var ret = ["<script>", "window.parent.uploadFinished('" + fname + "');", "</script>"]; res.send(ret.join("")); }, ); });
执行后可以打开开发人员选项，你会发现隐藏iframe中返回了服务器的一些数据。
第三种使用XMLHttpRequest2来进行真正的异步上传。
还是先贴出代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-"> <title>xhr level 异步上传</title> <script type="text/javascript" src="https://www.jb51.net/jquery路径..."></script> </head> <body> <div> <p>附件： <input type="file"></p> <p> <input type="button" value="异步上传"> <span>正在上传...</span> <span></span> <button>停止上传</button> </p> </div> <div></div> <script> function upload() { // .准备FormData var fd = new FormData(); fd.append("myfile", $("#myfile")[].files[]); // 创建xhr对象 var xhr = new XMLHttpRequest(); // 监听状态，实时响应 // xhr 和 xhr.upload 都有progress事件，xhr.progress是下载进度，xhr.upload.progress是上传进度 xhr.upload.onprogress = function(event) { if (event.lengthComputable) { var percent = Math.round(event.loaded * / event.total); console.log('%d%', percent); $("#upprog").text(percent); } }; // 传输开始事件 xhr.onloadstart = function(event) { console.log('load start'); $("#upprog").text('开始上传'); $("#stopbtn").one('click', function() { xhr.abort(); $(this).hide(); }); loading(true); }; // ajax过程成功完成事件 xhr.onload = function(event) { console.log('load success'); $("#upprog").text('上传成功'); console.log(xhr.responseText); var ret = JSON.parse(xhr.responseText); addToFlist(ret.fname); }; // ajax过程发生错误事件 xhr.onerror = function(event) { console.log('error'); $("#upprog").text('发生错误'); }; // ajax被取消 xhr.onabort = function(event) { console.log('abort'); $("#upprog").text('操作被取消'); }; // loadend传输结束，不管成功失败都会被触发 xhr.onloadend = function (event) { console.log('load end'); loading(false); }; // 发起ajax请求传送数据 xhr.open('POST', '/upload', true); xhr.send(fd); } function addToFlist(fname) { var temp = ["<p>", fname, "<button>删除</button>", "</p>" ]; $("#flist").append(temp.join("")); } function delFile(fname) { console.log('to delete file: ' + fname); // TODO: 请实现 } function loading(showloading) { if (showloading) { $("#uptxt").show(); $("#stopbtn").show(); } else { $("#uptxt").hide(); $("#stopbtn").hide(); } } </script> </body> </html>