ajax上传文件及nodeJS接收

ajax文件上传需要用到FormData

官方介绍

FormData对象用以将数据编译成键值对，以便用XMLHttpRequest来发送数据。其主要用于发送表单数据，但亦可用于发送带键数据(keyed data)，而独立于表单使用。如果表单enctype属性设为multipart/form-data ，则会使用表单的submit()方法来发送数据，从而，发送数据具有同样形式。

链接：https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects

自己写的简单实例：

html部分：

复制代码
<body>
    <form action="/" enctype="multipart/form-data" id="form">
        姓名：<input type="text" name="username" id=""><br>
        年龄：<input type="text" name="age" id=""><br>
        <br>
        本人照片：<input type="file" name="img" id="" value="选择照片"><br><br>
        <input type="button" value="确认提交" name="btn" id="btn">
    </form>
</body>
<script src="./jquery.js"></script>
<script>
    $('#btn').click(function(){
        // 利用formData将整个表单数据打包
        var inpData = new FormData(document.getElementById('form'));      
        $.ajax({
            url:'http://soul:7777/file',
            type:'post',
            contentType: false,
            data:inpData,// 打成的数据包可以直接通过send发送
            processData: false,
            success:function(data){
                if(data){
                    alert('成功')
                }else{
                    alert('失败')
                }
            }
        })
    })

</script>
复制代码

js服务端接收文件需要用到formidable模块，帮助我们处理文件等数据；

js部分代码：

复制代码
var http = require('http');
var fs = require('fs');
var server = http.createServer();
server.listen('7777', function () {
    console.log('欢迎来到6的世界');
});
server.on('request', function (req, res) {
    res.setHeader('Access-Control-Allow-Origin','*');
    if (req.url == '/file') {
        var fd = require('C:/Users/Administrator/AppData/Roaming/npm/node_modules/formidable');
        var form = new fd.IncomingForm();
        // 如果文件移动跨盘符依然需要提前设置上传文件的路径，默认在c盘
        form.uploadDir = 'E:/img';
        form.parse(req, function (err, fields, files) {
            // console.log(filds); // 表单数据
            // console.log(files); // 上传文件的数据 
            // 需要将上传后的文件移动到指定目录
            fs.rename(files.img.path, './img/' + files.img.name, function (err) {
                // 获取json数据进行解析
                fs.readFile('./db.json', 'utf8', function (err, json_str) {
                    var json_arr = JSON.parse(json_str);
                    // 组装新数据
                    // id 获取数组中最后一个元素的id+1,就是新数组的id值
                    fields.id = json_arr[json_arr.length - 1].id + 1;
                
                    // 将已经移动好的图片地址加到新数据里面
                    fields.img = '/img/' + files.img.name;
                    // 将新数据加入数组中
                    json_arr.push(fields);

                    // 将数组重新转为字符串写入josn文件
                    fs.writeFile('./db.json', JSON.stringify(json_arr), function (err) {
                        if (!err) {
                            // 返回提示信息
                            res.end('1');
                        } else {
                            res.end('0');
                        }
                    });
                });
            });
        });
    }
});
复制代码

 

多文件上传需要在input：file 标签添加属性multiple="multiple"（网上看到的）

小结一下：

ajax上传文件关键在于formdata对象的使用，服务端技术关键在于formidable模块对数据进行处理，然后对json文件进行增删改。

posted on   我却醉的像条狗  阅读(3938)  评论(0)  编辑  收藏  举报

编辑推荐：
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试？测试工程师会被淘汰吗？
< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

导航

统计

点击右上角即可分享
微信分享提示
AI IDE Trae