h5特性formdata带参数上传文件，上传到node端

最新推荐文章于 2024-08-12 09:54:37 发布

原创最新推荐文章于 2024-08-12 09:54:37 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#上传文件 #带参数 ajax node formda

本文介绍了一个使用HTML、JavaScript和Node.js实现的文件上传系统。通过前端JavaScript遍历选择的文件并将其附加到FormData对象中，然后发送到后端。Node.js后端利用formidable模块解析请求，将上传的文件保存到指定目录。

html：

<input type="file" id="addpic"  multiple="multiple"/>
<button id="uploadpic" style="width: 100px;height: 100px;">btn</button>

js:

var btn=document.getElementById("uploadpic");
btn.onclick=function(){
    var datapic=new FormData();

       datapic.append("abc","33333333333333");    传的参数abc 忘下看node服务端怎么接收
    for(var k=0;k<document.getElementById("addpic").files.length;k++)
    {
        datapic.append("myfile"+k, document.getElementById("addpic").files[k]);     //第一个参数是文件实例名，可以再后台作为files的引用来遍历所有文件  第二个是文件实例
    }
//使用JS来遍历files文件，并添加到FormData实例中，同时赋予名字"myfile"+k,
    $.ajax({
        url: "/add",
        data: datapic,
        type: 'POST',
        async: false,
        cache: false,
        contentType: false,    //这些参数要设置为false
        processData: false,
        success: function (result) {

//处理函数
        }
});
}

node:

app.js:

app.all("/add",userCtrl.add);   userCtrl是js文件名

userCtrl.js:

var formidable=require("formidable");
var fs=require("fs");
exports.add=function(req,res){
    var form = new formidable.IncomingForm();
    form.keepExtensions = true;
    form.uploadDir = "./avatar";
    form.multiples = true;
    form.maxFieldsSize = 50 * 1024 * 1024;
    form.parse(req, function(err, fields, files) {
	var abc=fields.abc;   结果是33333333333333，接收到了传来的参数，就是这样，在fields里
        for(var k in files)
        {
            fs.rename(files[k].path,"./avatar/"+files[k].name);
        }
        res.writeHead(200, {'Content-Type': 'text/html','Access-Control-Allow-Origin':'*','Accept-Encoding':'gzip, deflate, sdch'});



        res.end();
    });

}