from表单实现无跳转上传文件，接收页面后台数据。
本文基于我刚写的http://www.cnblogs.com/iwang5566/p/6287529.html进行了简单的扩展，实现页面无跳转表单数据提交，并接收后台返回的数据。
下载好，上一篇文章demo文件,替换指定文件即可。
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="/upload" enctype="multipart/form-data" method="post"> <p>附件：<input type="file" name="myfile" style=""></p> <p> <input type="submit"> </p> </form> <!-- 实现无跳转发送表单数据，文件。并能接收后台返回的数据。 主要技术要点： 1.form表单添加target属性，指定一个iframme的name。form表单提交后在iframe内嵌窗口接受响应。主页面就不会再跳转。 2.同是，我们需要，接收，知道后台返回的数据。以便我的的业务处理。这里让后台返回一个带有执行一个函数的script标签。 --> <iframe name="message" style="display: none"></iframe> <form action="/upload1" enctype="multipart/form-data" method="post" target="message"> <p>附件：<input type="file" name="myfile" style=""></p> <p> <input type="submit"> </p> <p id="success" style="display: none;">上传成功</p> </form> </body> <script type="text/javascript"> function uploadSuccess(data) { console.log(data); var p = document.getElementById('success'); p.innerText = JSON.stringify(data); document.getElementById('success').style.display = 'block'; } </script> </html>
app.js
/** * Created by iwang on 2017/1/15. */ //express使用的是@4版本的。 var express = require('express'); //form表单需要的中间件。 var mutipart= require('connect-multiparty'); var mutipartMiddeware = mutipart(); var app = express(); //下面会修改临时文件的储存位置，如过没有会默认储存别的地方，这里不在详细描述。 app.use(mutipart({uploadDir:'./linshi'})); //设置http服务监听的端口号。 app.set('port',process.env.PORT || 3000); app.listen(app.get('port'),function () { console.log("Express started on http://localhost:"+app.get('port')+'; press Ctrl-C to terminate.'); }); //浏览器访问localhost会输出一个html文件 app.get('/',function (req,res) { res.type('text/html'); res.sendfile('public/index.html') }); //这里用来玩，express框架路由功能写的，与上传文件没没有关系。 app.get('/about',function (req,res) { res.type('text/plain'); res.send('Travel about'); }); //这里就是接受form表单请求的接口路径，请求方式为post。 app.post('/upload',mutipartMiddeware,function (req,res) { //这里打印可以看到接收到文件的信息。 console.log(req.files); /*//do something * 成功接受到浏览器传来的文件。我们可以在这里写对文件的一系列操作。例如重命名，修改文件储存路径 。等等。 * * * */ //给浏览器返回一个成功提示。 res.send('upload success!'); }); app.post('/upload1',mutipartMiddeware,function (req,res) { //这里打印可以看到接收到文件的信息。 console.log(req.files); var data = JSON.stringify(req.files); console.log(typeof data); //给浏览器返回一个成功提示。 res.send('<script>window.parent.uploadSuccess('+data+')</script>'); });
如过你不需要暂停上传功能，和上传进度功能。那么上面的技术就可以让你实现上传功能了，能兼容ie低版本浏览器。
