ajax上传文件及nodeJS接收

匿名 (未验证) 提交于 2019-12-02 23:43:01

ajax文件上传需要用到FormData

官方介绍

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

链接: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文件进行增删改。

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!