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. 让我们再谈谈 iOS 安全

    前言 安全方面的话题总是聊不完的.这不,国外一家有名的专门攻击别人的安全公司 Hacking Team 自己被 Hack 了,结果有 400 多 G 的攻击资料泄漏出来,包括一些 0-day 的漏洞. ...

  2. 在Linux下搭建我的世界(Minecraft)服务器

    最近薅了百度云双12的羊毛,1核2G一年150.突然想起以前大学整个宿舍通宵开黑挖泥土的岁月,所以刚好趁着这台服务器,打算自己搭建一个我的世界服务器,重温一下以前的感觉. 超详细Linux搭建Java ...

  3. Centos6.4 相关配置记录

    1.手动开启eth0网卡 在虚拟机里装完CentOS6.4之后,使用NAT模式,输入ifconfig发现没有IP地址,查找了一下资料,原来是: 在CentOS 6.x的版本中,默认网卡是不开启的,需要 ...

  4. ES禁用_source不会影响聚合

    From Elasticsearch's website: The _source field contains the original JSON document body that was pa ...

  5. Java 吃货联盟

    import java.util.Scanner; public class Shao {  private static final int[] dishNames = null;  private ...

  6. 【POJ 3580】SuperMemo Splay

    题意 给定$n$个数,$m$个询问,每次在$[L,R]$区间加上一个数,或者反转一个区间$[L,R]$,或者循环右移区间$[L,R]$共$T$次,或者在第$x$个数后插入一个数$p$,或者删除第$x$ ...

  7. Posix线程编程指南(2)

    这是一个关于Posix线程编程的专栏.作者在阐明概念的基础上,将向您详细讲述Posix线程库API.本文是第2篇将向您讲述线程的创建与取消. 一.概念及作用在单线程程序中,我们经常要用到"全 ...

  8. BZOJ_1119_[POI2009]SLO_置换+贪心

    BZOJ_1119_[POI2009]SLO_置换+贪心 Description 对于一个1-N的排列(ai),每次你可以交换两个数ax与ay(x<>y),代价为W(ax)+W(ay) 若 ...

  9. liunx命令之:命令链接ftp服务器

    1. 连接ftp服务器 格式:ftp [hostname| ip-address]a)在linux命令行下输入: ftp 192.168.1.1 b)服务器询问你用户名和密码,分别输入用户名和相应密码 ...

  10. 【C++基础】形参实参

    c++规定:一个函数的默认实参既可以在定义中,也可在声明中指定,但在一个文件(准确的说,是一个作用域)中只能为一个形参指定默认实参一次