node.js - Uploading pictures -


html code:

<form  enctype="multipart/form-data">    <input id="upfile" class="upfile" type="file"     size="0" name="file" accept="image/gif,image/jpeg,image/png">    <input type="submit" id="upfilebtn" class="upfile"> </form>

ajax code: result:success

$('#upfilebtn').click(function () {     var file = $('#upfile');     var formdata = new formdata();     formdata.append('file',file[0]);     $.ajax({         url: '/api/upload',         type: 'post',         data: formdata,         // async: false,         cache: false,         contenttype: false,         processdata: false,         success: function(data){             if(200 === data.code) {                 $('#upfile').val('');                 alert('success');             } else {                 alert("failed");             }          },         error: function(){             alert("wrong");         }     }); });

api:

var express = require('express'); var router = express.ro router();var multer  = require('multer'); var storage = multer.diskstorage({     destination: function (req, file, cb) {       cb(null, config.upload)// upload:"./public/uploads"    },     filename: function (req, file, cb) {       cb(null,file.originalname)    } });  var upload = multer({ storage: storage });   //upload router.post('/upload', upload.single('file'), function (req, res, next) { console.log(req.file);//undefined });

i can't find out what's wrong. hope req.file existed, wasn't. found directory('public/uploads'),b ut doesn't have pictures. ajax code had run alert('success'), guess multer did't save image or didn't images. saw network request has send image. can tell me what's wrong it?

your api server example not working, assume part of working server. post minimal api server example 

var express = require('express'); var app     = express(); var multer  = require('multer'); var path    = require('path');  app.use('/', express.static(__dirname));  var storage = multer.diskstorage({   destination: function(req, file, cb) {     cb(null, './files');// upload:"./public/uploads"   },   filename: function(req, file, cb) {     cb(null, file.originalname)   } });  var upload = multer({storage: storage});  //upload app.post('/api/upload', upload.single('file'), function(req, res, next) {   console.log(req.file);//undefined   res.send({code: 200}); });  app.listen(3000, function() {   console.log('example app listening on port 3000!') });

the main problem here

var file = $('#upfile'); var formdata = new formdata(); formdata.append('file',file[0]);

i have achieved sending file in request using var formdata = new formdata($('form')[0]);

here working example

<html> <head>   <script       src="https://code.jquery.com/jquery-3.2.1.js"       integrity="sha256-dzankj/6xz9si04hgrsxu/8s717jcizly3oi35eouye="       crossorigin="anonymous"></script> </head> <body> <form enctype="multipart/form-data">   <input id="upfile" class="upfile" type="file"          size="0" name="file" accept="image/gif,image/jpeg,image/png">   <input type="submit" id="upfilebtn" class="upfile"> </form> <script>   $('#upfilebtn').click(function() {     var formdata = new formdata($('form')[0]);     $.ajax({       url: '/api/upload',       type: 'post',       data: formdata,       // async: false,       cache: false,       contenttype: false,       processdata: false,       success: function(data) {         if (200 === data.code) {           $('#upfile').val('');           alert('success');         } else {           alert("failed");         }        },       error: function() {         alert("wrong");       }     });   }); </script>  </body> </html>

Comments

Post a Comment

Popular posts from this blog

html - How to custom Bootstrap grid height? -

why bootstrap grid has height 591.067 ? did height came ? .main-post { padding: 20px; background-color: #fff; border: 1px solid #d8d8d8; margin-bottom: 100px; } .main-post .post-categories { margin-bottom: 10px } .main-post h3 { margin: 0 0 10px; color: #777; letter-spacing: -1px; font-weight: bold } .main-post .post-author, .main-post .post-date, .main-post .post-comments { font-size: 12px } .main-post img { display: block; margin: 10px 0; } .main-post .post-summary { line-height: 1.7; color: #888 } .main-post { color: #999 } <div class="col-sm-6"> <div class="main-post"> <h3 class="post-title"> <a href="#"> post title </a> </...
Read more

javascript - pass values from mssql to views in node -

being new node js , javascript . have been trying find solution problem . this app.js file var express=require ('express'); var bodyparser = require('body-parser'); var path = require ('path'); var sql = require('mssql'); var app = express(); const config = { user: 'sa', password: 'password', server: 'localhost\\sqlexpress', // can use 'localhost\\instance' connect named instance database: 'pcgdb', options: { encrypt: false // use if you're on windows azure } }; const request = new sql.request() //view engine app.set('view engine', 'ejs'); app.set('views', path.join(__dirname, 'views')) app.use(bodyparser.json()); app.use(bodyparser.urlencoded({extended: false})); app.get('/',function(req,res){ res.render('index') }); app.get('/new_project', function(req, res) { function(data,err){ ...
Read more

javascript - Understanding ExtJS Framework Syntax -

i have been given project uses sencha's extjs framework, no handover or documentation. trying come grips hoping people can pls assist me following syntax possibly point me specific site might explain code newcomer framework. i have been going through code , unsure doing, i.e.: if(val==1) { ext.getcmp('status').settext('awaiting approv'); } switch(flag) { case 1: if(val==0) { ext.getcmp('complex_first').el.replacecls('x-form-complex', 'x-form-simplex'); } else { ext.getcmp('complex_first').el.replacecls('x-form-simplex', 'x-form-complex'); } break; case 2: if(val==0) { ext.getcmp('complex_second').el.replacecls('x-form-complex', 'x-form-simplex'); } else { ext.getcmp('complex_second').el.replacecls('x-fo...
Read more