zoukankan      html  css  js  c++  java
  • nodejs+ajax实现简单的文件上传功能

    app.js中引入express的第三方中间件multer实现文件上传功能。

    var multer  = require('multer');//用express的第三方中间件 multer 实现文件上传功能。
    app.use(multer({//设置文件上传到的位置
      dest: './public/images/upload',
      rename: function (fieldname, filename) {
        return filename;
      }
    }));

    路由

    app.post('/upload', function (req, res) {
            req.flash('success', '文件上传成功!');
            res.json({"result":{message:"文件上传成功!"}});
        });

    html

    <input type="file" id="photo">
    
    <button id="upload">上传</button>

    ajax

        /*上传文件*/
            $("#upload").click(function(){
                //do something
                var file = $("#photo")[0].files;
                //上次修改时间
                console.log("文件上次修改时间"+file[0].lastModifiedDate);
                //名称
                console.log("文件名称"+file[0].name);
                //大小 字节
                console.log("文件大小"+file[0].size);
                //类型
                console.log("文件类型"+file[0].type);
                //创建FormData对象
                var data = new FormData();
                //为FormData对象添加数据
                $.each(file, function(i, file) {
                    data.append('upload_file', file);
                });
                $.ajax({
                    data: data,
                    url: '/upload',
                    type:"post",
                    dataType: 'JSON',
                    contentType: false,    //不可缺
                    processData: false,    //不可缺
                    success: function(data){
                        console.log(data);
                        alert("上传成功!");
                    },
                    error: function(err){
                        console.log('error: ' + err);
                    }
                });
            })
  • 相关阅读:
    python中datetime的使用方法
    apple for liudanping
    fiddle教程收藏
    idea下maven project dependencies 有红线
    win7,下安装mysql如何初始化
    使用idea练习springmvc时,出现404错误总结
    spring拦截器
    spring 学习总结
    eclipse 中maven项目的运行
    Java对象new,到赋null过程的总结
  • 原文地址:https://www.cnblogs.com/kelly007/p/5374378.html
Copyright © 2011-2022 走看看