ajax文件上传代码,nodejs+multer+ajax文件上传(示例代码)

前端 html代码 + ajax代码

form表单(无需指定action)

使用jquery中的ajax的方式上传文件

$(".files1").on("change",function(e){

var e = e || window.event;

var files = e.target.files;

var file = files[0];

//文件上传

$(".uploadBtn").off("click").on("click",function(){

var username = $(‘.username‘).val();

var formData = new FormData();

formData.append(‘files1‘,file);

formData.append(‘username‘,username);

console.log(file);

$.ajax({

url: "/ajaxUpload",

type: "post",

data:formData,

contentType: false,

processData: false,

success: function(res){

console.log(res);

},

error:function(err){

console.log(err);

}

});

})

})

通过FormData对象可以组装一组用

如果你把表单的编码类型设置为multipart/form-data ，则通过FormData传输的数据格式和表单通过submit() 方法传输的数据格式相同。

所以使用formData的时候 只需要在form上设置enctype="multipart/form-data"，然后用ajax跟formData提交form表单数据,可代替直接用form表单submit提交方式。

multer介绍

Multer 是一个 node.js 中间件，用于处理 multipart/form-data 类型的表单数据, 它主要用于上传文件. 它是写在 busboy 之上非常高效。

注意: Multer 不会处理任何非 multipart/form-data 类型的表单数据.

windows下 安装 multer

npm install --save multermulter的使用

var multer = require(‘multer‘);

/**

* process.cwd()获取项目根目录地址，可以将上传的文件指定到静态文件目录下，然后再返回地址给前端页面，如：

* var uploadPath = process.cwd()+‘/public/uploads‘ 前端访问地址 http://localhost:3000/uploads/文件名

**/

var uploadPath = process.cwd()+‘/uploads‘;//直接存放在根目录下uploads

var storage =multer.diskStorage({//multer存储引擎 存储引擎自定义引用 https://github.com/expressjs/multer/blob/master/StorageEngine.md

destination: ,//指定上传文件的路径

filename: function(req, file, cb) { cb(null, file.fieldname + ‘-‘ +Date.now())//命名上传文件 } })

var multer = multer({

storage: storage，

//limits：‘‘//Limits of the uploaded data

}).single(‘files1‘);//single 单文件上传，files1为form表单中 接受文件的name字段名称

app.post(‘/ajaxUpload‘,function(req,res){

multer(req,res,function(err){

if(err){

console.log(err);

return ;

}

console.log(req.body.username);//获取通过formData中表单的字段 name="username"的数据

//req.body ajax提交的非文件数据

//req.body.username //提交参数 username

//req.file.fieldname 上传文件 input file name字段名称

//req.file.filename 上传文件 文件名

//req.file.originalname 上传文件 文件名

//req.file.mimetype 上传文件类型

//req.file.size 上传文件大小

//req.file.destination 上传文件存在的路径

//req.file.path 上传文件的 路径

console.log(req.file.path);

/**

* 可以通过req.file中的参数，做一个文件上传的过滤，例如req.file.size 限制文件上传大小，req.file.mimetype 限制文件上传的类型

**/

res.send({msg:‘上传成功‘,img:req.file.path});//返回数据到前端页面，可以将上传的图片，在前端预览。

})

});

在使用 res.send()发送数据到前端时，因为本文图片存放的地址是在项目根目录下，所以显示的地址是D:\leijie\test\express-mysql\uploads\share.png。

这种形式在页面上无法预览出来，如果想简单的使用预览出，可以将图片上传的目录存放在public静态目录下

静态目录设置 在app.js文件中设置 app.use(express.static(path.join(__dirname, ‘public‘)));

相关链接：