嗨,我正在研究這個簡單的表單,嘗試使用FormData將文件發(fā)送到我的Nodejs服務(wù)器,但由于某種原因,Node從未收到它.另外,如何讓節(jié)點(diǎn)在頁面上發(fā)回確認(rèn)消息,說明已收到文件.我做錯了什么或者錯過了什么？請幫忙.先感謝您.這是我的代碼.
<!DOCTYPE html><html><head><title></title><script type="text/javascript"> var fd = new FormData(); fd.append( 'file', input.files[0] );$.ajax({ url: '/uploadfile', data: fd, processData: false, contentType: false, type: 'POST', success: function(data){ alert(data); }});</script></head><body> <form enctype='multipart/form-data'> <input type= "text" name = "theName"/> <input type="file" id="file" name="file"> <input type="submit"></form></body></html>服務(wù)器(Nodejs)
var express = require('express'); var router = express.Router(); /* GET users listing. */ router.get('/', function(req, res){ res.sendfile('./public/html/form-file.html'); }); /* POST file */ router.post('/', function(req , res){ console.log('Request received: '); console.log(req.body) // this line helps inspect the request so you can see whether the data is in the url (GET) or the req body (POST) console.log('\nRequest recieved: \nmethod: ' req.method '\nurl: ' req.url) // this line logs just the method and url res.end('callback(\'{\"msg\": \"OK\"}\')'); }); module.exports = router;解決方法:
這是這個問題的最佳解決方案 – >學(xué)分歸于：https://codeforgeek.com/2014/11/ajax-file-upload-node-js/
HTML
<html> <head> <title>File upload Node.</title> </head> <body> <form id="uploadForm" enctype="multipart/form-data" action="/api/photo" method="post"> <input type="file" name="userPhoto" /> <input type="submit" value="Upload Image" name="submit"> <span id = "status"></span> </form> </body> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.51/jquery.form.min.js"></script><script>$(document).ready(function() { $('#uploadForm').submit(function() { $("#status").empty().text("File is uploading..."); $(this).ajaxSubmit({ error: function(xhr) { status('Error: ' xhr.status); }, success: function(response) { console.log(response) $("#status").empty().text(response); } }); return false; }); });</script></html>服務(wù)器
var express = require("express");var multer = require('multer');var app = express();var upload = multer({ dest: './uploads/'});app.use(multer({ dest: './uploads/',rename: function (fieldname, filename) { return filename Date.now();},onFileUploadStart: function (file) { console.log(file.originalname ' is starting ...');},onFileUploadComplete: function (file) { console.log(file.fieldname ' uploaded to ' file.path) }}));app.get('/',function(req,res){ res.sendFile(__dirname "/index.html");});app.post('/api/photo',function(req,res){upload(req,res,function(err) { if(err) { return res.end("Error uploading file."); } res.end("File is uploaded"); });});app.listen(3000,function(){ console.log("Working on port 3000");});