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);
                    }
                });
            })
  • 相关阅读:
    使用makeself创建安装文件
    Java类的多态机制
    LintCode 带最小值操作的栈
    js限制checkbox选中个数
    Java Collection框架—List set map 的异同世界
    利用runtime动态生成对象?
    2014-3-4 大规模无缝水陆导航图
    atitit。全局变量的设计与实现 java php的异同
    PHP从入门到精通(四)
    PHP从入门到精通(三)
  • 原文地址:https://www.cnblogs.com/kelly007/p/5374378.html
Copyright © 2011-2022 走看看