图像file upload与节点和快递
嗨，我想要做一个图像上传与ajax.so这是我的文件。
//index.html <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>File Upload showing Upload Progress</title> <style> * { font-family: Verdana; font-size: 12px; } </style> </head> <body> <form action="/upload" method="post" enctype="multipart/form-data" id="MyUploadForm"> <input name="ImageFile" id="imageInput" type="file" /> <input type="submit" id="submit-btn" value="Upload" /> <img src="images/ajax-loader.gif" id="loading-img" style="display:none;" alt="Please Wait"/> </form> <div id="output"></div> <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.min.js'></script> <script type='text/javascript' src='main.js'></script> </body> <script type="text/javascript" src="js/jquery.form.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var options = { target: '#output', // target element(s) to be updated with server response beforeSubmit: beforeSubmit, // pre-submit callback resetForm: true // reset the form after successful submit }; $('#MyUploadForm').submit(function() { $(this).ajaxSubmit(options); //Ajax Submit form // return false to prevent standard browser submit and page navigation return false; }); }); //function to check file size before uploading. function beforeSubmit(){ //check whether browser fully supports all File API if (window.File && window.FileReader && window.FileList && window.Blob) { if( !$('#imageInput').val()) //check empty input filed { $("#output").html("Are you kidding me?"); return false } var fsize = $('#imageInput')[0].files[0].size; //get file size var ftype = $('#imageInput')[0].files[0].type; // get file type //allow only valid image file types switch(ftype) { case 'image/png': case 'image/gif': case 'image/jpeg': case 'image/pjpeg': break; default: $("#output").html("<b>"+ftype+"</b> Unsupported file type!"); return false } //Allowed file size is less than 1 MB (1048576) if(fsize>1048576) { $("#output").html("<b>"+fsize +"</b> Too big Image file! <br />Please reduce the size of your photo using an image editor."); return false } $('#submit-btn').hide(); //hide submit button $('#loading-img').show(); //hide submit button $("#output").html(""); } else { //Output error to older unsupported browsers that doesn't support HTML5 File API $("#output").html("Please upgrade your browser, because your current browser lacks some new features we need!"); return false; } } </script> </html> 这是我的app.js
var express = require('express'); //Express Web Server var bodyParser = require('body-parser'); //connects bodyParsing middleware var formidable = require('formidable'); var path = require('path'); //used for file path var fs =require('fs-extra'); //File System-needed for renaming file etc var app = express(); app.use(express.static(path.join(__dirname, 'public'))); app.set('views', __dirname + '/views'); app.engine('html', require('ejs').renderFile); /* ========================================================== bodyParser() required to allow Express to see the uploaded files ============================================================ */ app.use(bodyParser({defer: true})); app.route('/').get(function(req,res) { console.log("Hello world"); res.render('index.html'); res.end('done'); }); app.post('/upload', function(req, res) { res.send('fileinfo: ' + req.files); }); var server = app.listen(3030, function() { console.log('Listening on port %d', server.address().port); });
但是我得到req.files undefined.Can有人可以告诉为什么？ 任何人都可以为我的scnario有解决scheme。我正确地做一切。
这里是一个快速强大的演示页面的引用：
目前由于未知错误而中断
但是，你可以明确地parsing请求体：
app.post('/upload', function(req, res) { var form = new formidable.IncomingForm(); form.parse(req, function(err, fields, files) { console.log(files); res.send('fileinfo: ' + files); }); });