本文基於我剛寫的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低版本瀏覽器。