| 前端 ajax FormData单文件上传和多文件上传 后台node+express+formidable接收处理 | 您所在的位置：网站首页 › FormData多文件上传二 › 前端 ajax FormData单文件上传和多文件上传 后台node+express+formidable接收处理 |
前端 ajax FormData单文件上传和多文件上传 后台node+express+formidable接收处理
|
1.FormData单文件上传
原型效果 js部分代码 $(".registerBtn").click(function(){ var formData = new FormData(); var fileImg = document.getElementById("exampleInputFile"); var fileImgObj = fileImg.files[0]; formData.append("username",$("#username").val()); formData.append("password",$("#password").val()); formData.append("avatarObj",fileImgObj); $.ajax({ url:"/doRegist", processData:false,// 不处理数据 contentType:false,// 不设置内容类型 type:"post", data:formData, success:function(result){ } }) })node 代码部分 需要安装formidable，silly-datetime，express插件 var express = require("express"); var formidable = require("formidable"); var fs = require("fs"); var sd = require('silly-datetime'); var path = require('path'); var app = express(); app.post("/doRegist",doRegist); app.listen(3000); function doRegist(req,res,next){ var form = new formidable.IncomingForm(); form.multiples=true;//设置为多文件上传 如果是单文件上传可以不写，但是如果是多文件必须写 form.uploadDir = __dirname+"/../tempUp";//存放临时图片的二进制文件 /* @params fields 是字段 例如:用户名 密码 @params files 是文件 例如：图片 word文档 excel 文档 */ form.parse(req, function(err, fields,files) { var username = fields.username; var password = fields.password; var avatarObj = files.avatarObj; console.log(avatarObj) var size = files.avatarObj.size; var oldName = files.avatarObj.path; if(size>1024){ fs.unlink(oldName,function(){ res.send("图片大于1M"); }); //删除图片 return; } var tt = sd.format(new Date(), 'YYYYMMDDHHmmss'); var ranNum = parseInt(Math.random()*89999+10000); var extname = path.extname(files.avatarObj.name); var newName = __dirname+"/../avatar/"+tt+ranNum+extname; //直接改名就放到某个文件夹下面 var avatarPath = tt+ranNum+extname; fs.rename(oldName,newName,function(err){ if(err){ next(); //中间件不执行，往下走 return; } // res.send("重命名完成"); return; }) }) });打印avatarObj 结构如下 html部分代码 input:file属性 **accept：**表示可以选择的文件MIME类型，多个MIME类型用英文逗号分开，常用的MIME类型。 **multiple：**是否可以选择多个文件，多个文件时其value值为第一个文件的虚拟路径。 1、accept 只能选择jpg和gif,png图片(想要支持多种上传，参照MIME类型自己添加就可以了) 2、multiple 多文件上传 js代码部分 |
html部分代码 当form中包含了上传文件（input type=“file”） 时，需要设置： 这个操作实际是设置了MIME stream类型，请求会以二进制传输。
node部分如上图，打印avatarObj 结构如下 数组形式的 
【本文地址】
公司简介
联系我们