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

ajax上传文件及nodeJS接收的更多相关文章

  1. 伪ajax上传文件

    伪ajax上传文件   最近在折腾伪ajax异步上传文件. 网上搜索了一下,发现大部分方法的input file控件都局限于form中,如果是在form外的呢? 必须动态生成一个临时form和临时if ...

  2. ajax上传文件显示进度

    下面要做一个ajax上传文件显示进度的操作,文末有演示地址 这里先上代码: 1.前端代码 upload.html <!DOCTYPE html> <html lang="e ...

  3. 闲话ajax，例ajax轮询，ajax上传文件[开发篇]

    引语:ajax这门技术早已见怪不怪了,我本人也只是就自己真实的经验去总结一些不足道的话.供不是特别了解的朋友参考参考! 本来早就想写一篇关于ajax的文章的,但是前段时间一直很忙,就搁置了,趁着元旦放 ...

  4. django上课笔记7-jQuery Ajax 和 原生Ajax-伪造的Ajax-三种Ajax上传文件方法-JSONP和CORS跨域资源共享

    一.jQuery Ajax 和 原生Ajax from django.conf.urls import url from django.contrib import admin from app01 ...

  5. IE8/9 JQuery.Ajax 上传文件无效

    IE8/9 JQuery.Ajax 上传文件有两个限制: 使用 JQuery.Ajax 无法上传文件(因为无法使用 FormData,FormData 是 HTML5 的一个特性,IE8/9 不支持) ...

  6. springMVC+jsp+ajax上传文件

    工作中遇到的小问题,做个笔记 实现springMVC + jsp + ajax 上传文件 HTML <body> <form id="myform" method ...

  7. Ajax上传文件进度条显示

    要实现进度条的显示,就要知道两个参数,上传的大小和总文件的大小 html5提供了一个上传过程事件,在上传过程中不断触发,然后用已上传的大 小/总大小,计算上传的百分比,然后用这个百分比控制div框的显 ...

  8. flask jQuery ajax 上传文件

    1.html 代码 <div> <form id="uploadForm" enctype="multipart/form-data" > ...

  9. ajax上传文件及进度显示

    之前在博文:原生ajax写法就提及过ajax2.0与1.0的差别是多了FormData和利用FormData文件上传(当然还有跨域,但不是本文的重点). 那么具体怎么样实现ajax上传文件呢? 一般来 ...

随机推荐

  1. Django的模型层(2)---多表操作

    多表操作 创建模型 实例:我们来假定下面这些概念,字段和关系 作者模型:一个作者有姓名和年龄. 作者详细模型:把作者的详情放到详情表,包含生日,手机号,家庭住址等信息.作者详情模型和作者模型之间是一对 ...

  2. TopCoder SRM420 Div1 RedIsGood —— 期望

    题目链接:https://vjudge.net/problem/TopCoder-9915 (论文上的题) 题解: 更正:, i>0, j>0 代码如下: #include <ios ...

  3. python二叉树的遍历，递归和非递归及相关其它

    # encoding=utf-8class node(object): def __init__(self,data,left=None,right=None): self.data = data s ...

  4. mooc_java 集合框架上 学生所选课程

    用一个集合Set存放学生所选课程接口不能实例化,所以用其实现类进行实例化 set接口不能实例化,通过HashSet这个实现类来进行实例化,需要导入包this.courses=new HashSet() ...

  5. Linux三种网络-vmware三种网络模式

    Host-Only 桥接 NAT VMware虚拟机三种联网方法及原理 一.Brigde——桥接:默认使用VMnet0 1.原理: Bridge 桥"就是一个主机,这个机器拥有两块网卡,分别 ...

  6. css3立体旋转菜单

    css3立体旋转菜单,css3,3D,立体旋转,立体菜单,菜单导航,css3立体旋转菜单是一款纯css3实现的三维立体旋转导航菜单. 源码下载页:http://www.huiyi8.com/sc/71 ...

  7. linux 进程学习笔记-进程退出/终止进程

    <!--[if !supportLists]-->Ÿ <!--[endif]-->退出/终止进程 void _exit(int status) 与 void exit(int ...

  8. bootstrap框架日期时间之年月选择及汉化

    ==>上次介绍了bootstrap框架日期时间 开始日期和结束日期选择 http://www.cnblogs.com/wjqblogs/p/4043198.html 今天又做了个只选择年月的日期 ...

  9. docker基础用法

    docker 架构: docker 安装前期准备: 安装centos7 ,不要在centos6  [root@node01 yum.repos.d]# uname -a Linux node01 -. ...

  10. 「P4996」「洛谷11月月赛」 咕咕咕（数论

    题目描述 小 F 是一个能鸽善鹉的同学,他经常把事情拖到最后一天才去做,导致他的某些日子总是非常匆忙. 比如,时间回溯到了 2018 年 11 月 3 日.小 F 望着自己的任务清单: 看 iG 夺冠 ...