ajax上传文件及nodeJS接收

时间 2020-05-22

标签 ajax 上传文件 nodejs 接收栏目 Ajax 繁體版

原文原文链接

ajax文件上传须要用到FormDatahtml

官方介绍node

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

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

本身写的简单实例：npm

html部分：json

<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部分代码：post

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"（网上看到的）ui

小结一下：url

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