分享一个node+ajax+h5上传文件的实例

最新推荐文章于 2022-04-28 21:44:05 发布

原创最新推荐文章于 2022-04-28 21:44:05 发布 · 366 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#node #ajax #上传文件

本文介绍了一种使用HTML和JavaScript实现文件选择与上传的方法，并通过Node.js和formidable库在服务器端处理上传文件的过程，包括文件的临时存储、Base64编码及最终的数据发送。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html:

<input type="file"   id="xlsFile" name="xlsFile" />

<input class="pltj_input" type="button" id="importTeacher" value="导入"/>

js:

$(function(){

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

//处理函数
                }
            });

        });

})

node:

app.js:

app.all("/add",fileCtrl.add);

fileCtrl.js:

var fs = require("fs");

var formidable=require("formidable");

//文件base64进行加密
function base64_encode(path) {
    var bitmap = fs.readFileSync(path);
    return new Buffer(bitmap).toString('base64');
};

function unlinkFile(path) {
    fs.unlinkSync(path, function (e) {
        if (!e) {
            return true;
        }
        return false;
    });
}

exports.add=function(req,res){
    res.writeHead(200, {'Content-Type': 'text/html','Access-Control-Allow-Origin':'*','Accept-Encoding':'gzip, deflate, sdch'});
    var user = req.session.user;
    var data = {
        kindergartenCode: user.data.kindergartenCode
    };
    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) {

        for(var name in files)
        {
            fs.rename(files[name].path,"./avatar/"+files[name].name);
            var file = files[name];

            var image = base64_encode(file.path);
            data.excels = image;
            send("/importTeachers",data,user.token,function (back) {     //这句话就是请求后台接口，我封装成了方法send
                unlinkFile('avatar/'+file.name);    //删除文件
               console.log(file.path)
                try{
                    var data = JSON.parse(back);
                    res.end(data.msg);
                }
                catch(e)
                {

                    res.end("error");
                }
            });
        }

    });

}