node.js - Image file upload with node and express -
hi trying image upload ajax.so files.
//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) updated server response beforesubmit: beforesubmit, // pre-submit callback resetform: true // reset form after successful submit }; $('#myuploadform').submit(function() { $(this).ajaxsubmit(options); //ajax submit form // return false prevent standard browser submit , page navigation return false; }); }); //function check file size before uploading. function beforesubmit(){ //check whether browser supports file api if (window.file && window.filereader && window.filelist && window.blob) { if( !$('#imageinput').val()) //check empty input filed { $("#output").html("are kidding me?"); return false } var fsize = $('#imageinput')[0].files[0].size; //get file size var ftype = $('#imageinput')[0].files[0].type; // file type //allow 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 less 1 mb (1048576) if(fsize>1048576) { $("#output").html("<b>"+fsize +"</b> big image file! <br />please reduce size of photo using image editor."); return false } $('#submit-btn').hide(); //hide submit button $('#loading-img').show(); //hide submit button $("#output").html(""); } else { //output error older unsupported browsers doesn't support html5 file api $("#output").html("please upgrade browser, because current browser lacks new features need!"); return false; } } </script> </html> this 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 file path var fs =require('fs-extra'); //file system-needed 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 allow express see 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); }); but getting req.files undefined.can tell why? can have solution scnario.am correctly.
here quotation express-formidable-demo page:
currently broken due unknown bug
but, may parse request body explicitly:
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); }); });
Comments
Post a Comment