javascript - how to upload image from frontend to backend

I have a button called Upload Image.On click that button,a modal is opening. There is two different field called Image Title, Input File. On submit the Save button. It will go to the image.js file. I am not able to understand how to save these image to my database. someone please help me.

Frontend Code

/modal.html

         <div class="container">
              <div class="row">
                  <div class="col-md-12">
                      <div class="uploadPhotoGallery">
                          <button type="button" data-toggle="modal" data-target="#myModal" id="uploadButton">Upload Image</button>
                      </div>                     
                  </div>
              </div>
         </div>
<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Please Upload Image</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <input type="text" class="form-control" id="imagetitle" placeholder="Image Title">
                </div>
                 <div class="form-group">
                     <input type="file" class="form-control" id="input-image" name="input-image" accept="image/*">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancle</button>
                <button type="submit" class="btn btn-default" id="myFormSubmit">Save</button>
            </div>
        </div>
    </div>
</div>
 <script src="javascript/image.js"></script>

/image.js

$(function() {
    $('#myFormSubmit').click(function (e) {
       //How to send Image from here to backend
   });
});

Node.js Backend Code

/request.js

exports.addads = function(req, res) {
var addads = req.app.db.model('Adds');
      var data = { imageTitle       : req.body.imageTitle,
                   img              : "http://localhost:4040/"+req.body.img, };
      var query = addads(data);
      query.save(function(err,data)  {
        if(err) {
          console.log(err.toString());
        } else  { 
          //  console.log('Adds Added Successfully');
            res.json({ success: true });
            update_routers(req);
          }
      });
};

 //Image Logic  
    var file_url = '';
    var storage = multer.diskStorage({ //multers disk storage settings
        //console.log("sdfas");
        destination: function (req, file, cb) {
            cb(null, 'public/img/');
        },
        filename: function (req, file, cb) {
            var datetimestamp = Date.now();
            file_url = file.fieldname + '-' + datetimestamp + '.' + file.originalname.split('.')[file.originalname.split('.').length -1]
            cb(null, file_url);
        }
    });

    var upload = multer({ //multer settings
                    storage: storage
                }).single('file');

    /** API path that will upload the files */
    app.post('/uploadImage', function(req, res) {
      //  console.log("req*****", req.fields);
        upload(req,res,function(err){
            if(err){
                 res.json({error_code:1,err_desc:err});
                 return;
            }
            console.log("file_url", file_url);
            exec('convert '+ "public/img/" + file_url + " -resize 100x100 " + "public/img/" + file_url, function (err, out) {
              if (err) {
                console.log("error", err);
              } else {
                console.log("success");
                res.json({error_code:0,err_desc:null, file_url: 'img/'+file_url});
              }
           });
        });
    });

/route.js

router.post('/api/adds', requests.addads);

/schema/ads.js

exports = module.exports = function(app, mongoose) {
     var addsSchema = new mongoose.Schema({
       imageTitle     : { type: String, default: '' },    
       img            : { type: String, default: '' }

    });
    app.db.model('Adds', addsSchema);
  };

Frontend Code

/modal.html

         <div class="container">
              <div class="row">
                  <div class="col-md-12">
                      <div class="uploadPhotoGallery">
                          <button type="button" data-toggle="modal" data-target="#myModal" id="uploadButton">Upload Image</button>
                      </div>                     
                  </div>
              </div>
         </div>
<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Please Upload Image</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <input type="text" class="form-control" id="imagetitle" placeholder="Image Title">
                </div>
                 <div class="form-group">
                     <input type="file" class="form-control" id="input-image" name="input-image" accept="image/*">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancle</button>
                <button type="submit" class="btn btn-default" id="myFormSubmit">Save</button>
            </div>
        </div>
    </div>
</div>
 <script src="javascript/image.js"></script>

/image.js

$(function() {
    $('#myFormSubmit').click(function (e) {
       //How to send Image from here to backend
   });
});

Node.js Backend Code

/request.js

exports.addads = function(req, res) {
var addads = req.app.db.model('Adds');
      var data = { imageTitle       : req.body.imageTitle,
                   img              : "http://localhost:4040/"+req.body.img, };
      var query = addads(data);
      query.save(function(err,data)  {
        if(err) {
          console.log(err.toString());
        } else  { 
          //  console.log('Adds Added Successfully');
            res.json({ success: true });
            update_routers(req);
          }
      });
};

 //Image Logic  
    var file_url = '';
    var storage = multer.diskStorage({ //multers disk storage settings
        //console.log("sdfas");
        destination: function (req, file, cb) {
            cb(null, 'public/img/');
        },
        filename: function (req, file, cb) {
            var datetimestamp = Date.now();
            file_url = file.fieldname + '-' + datetimestamp + '.' + file.originalname.split('.')[file.originalname.split('.').length -1]
            cb(null, file_url);
        }
    });

    var upload = multer({ //multer settings
                    storage: storage
                }).single('file');

    /** API path that will upload the files */
    app.post('/uploadImage', function(req, res) {
      //  console.log("req*****", req.fields);
        upload(req,res,function(err){
            if(err){
                 res.json({error_code:1,err_desc:err});
                 return;
            }
            console.log("file_url", file_url);
            exec('convert '+ "public/img/" + file_url + " -resize 100x100 " + "public/img/" + file_url, function (err, out) {
              if (err) {
                console.log("error", err);
              } else {
                console.log("success");
                res.json({error_code:0,err_desc:null, file_url: 'img/'+file_url});
              }
           });
        });
    });

/route.js

router.post('/api/adds', requests.addads);

/schema/ads.js

exports = module.exports = function(app, mongoose) {
     var addsSchema = new mongoose.Schema({
       imageTitle     : { type: String, default: '' },    
       img            : { type: String, default: '' }

    });
    app.db.model('Adds', addsSchema);
  };

Share Improve this question edited Feb 11, 2017 at 11:18 Ben Fortune 32.2k10 gold badges81 silver badges81 bronze badges asked Feb 11, 2017 at 10:16 joy 111 gold badge1 silver badge5 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 0

You will need multer on your nodeJS backend.

Front end:

$('#myFormSubmit').click(function (e) {
    var formdata = new FormData()
    formdata.append('photo',$('#input-image').files[0])
    $.ajax({
        method : 'POST',
        processData : false,
        contentType : false,
        url : '/imageupload',
        data : formdata,
        success : function(o){
            //callback here on success
        },
        error : function(e){
            //callback here on error
        }
    })
});

back end (assuming app is listening):

var multer = require('multer')
var upload = multer({dest : 'uploads/'}).single('photo') 
//make sure you have access to write files
//make sure 'photo' matches up with the field entered at the front end e.g. formdata.append('photo', ...)

app.post('/imageupload',upload,function(req,res){
    //req.file will now be available as a json object, save to mongodb, re: filename, path etc
    res.send('rabbit')
})

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - how to upload image from frontend to backend - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)