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文件进行增删改。
ajax上传文件及nodeJS接收的更多相关文章
- 伪ajax上传文件
伪ajax上传文件 最近在折腾伪ajax异步上传文件. 网上搜索了一下,发现大部分方法的input file控件都局限于form中,如果是在form外的呢? 必须动态生成一个临时form和临时if ...
- ajax上传文件显示进度
下面要做一个ajax上传文件显示进度的操作,文末有演示地址 这里先上代码: 1.前端代码 upload.html <!DOCTYPE html> <html lang="e ...
- 闲话ajax，例ajax轮询，ajax上传文件[开发篇]
引语:ajax这门技术早已见怪不怪了,我本人也只是就自己真实的经验去总结一些不足道的话.供不是特别了解的朋友参考参考! 本来早就想写一篇关于ajax的文章的,但是前段时间一直很忙,就搁置了,趁着元旦放 ...
- 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 ...
- IE8/9 JQuery.Ajax 上传文件无效
IE8/9 JQuery.Ajax 上传文件有两个限制: 使用 JQuery.Ajax 无法上传文件(因为无法使用 FormData,FormData 是 HTML5 的一个特性,IE8/9 不支持) ...
- springMVC+jsp+ajax上传文件
工作中遇到的小问题,做个笔记 实现springMVC + jsp + ajax 上传文件 HTML <body> <form id="myform" method ...
- Ajax上传文件进度条显示
要实现进度条的显示,就要知道两个参数,上传的大小和总文件的大小 html5提供了一个上传过程事件,在上传过程中不断触发,然后用已上传的大 小/总大小,计算上传的百分比,然后用这个百分比控制div框的显 ...
- flask jQuery ajax 上传文件
1.html 代码 <div> <form id="uploadForm" enctype="multipart/form-data" > ...
- ajax上传文件及进度显示
之前在博文:原生ajax写法就提及过ajax2.0与1.0的差别是多了FormData和利用FormData文件上传(当然还有跨域,但不是本文的重点). 那么具体怎么样实现ajax上传文件呢? 一般来 ...
随机推荐
- [Android] Gradle 安装
Gradle安装非常简单,只要从官网下载压缩包,解压,修改一下环境变量即可. 笔者写本篇随笔时,版本是1.12. Windows下安装 1 到官网(http://www.gradle.org/down ...
- 《CSS权威指南（第三版）》---第七章 基本视觉格式化
主要知识记录: 1.给一个元素指定内容区宽度,如果设置了内边距,边框和外边距,这些因素都会影响CSS的width属性. 2.在水平格式化的7个属性中,width,margin-left,margin- ...
- 吴恩达机器学习笔记（七） —— K-means算法
主要内容: 一.K-means算法简介 二.算法过程 三.随机初始化 四.二分K-means 四.K的选择 一.K-means算法简介 1.K-means算法是一种无监督学习算法.所谓无监督式学习,就 ...
- JAVA-三大语句（选择语句、条件语句、循环语句）
跳出指定的for循环体,和goto很像 1 K:for(int i=0;i<3;i++){//给这个for循环体取一个名字为K 2 for(int j=0;j<3;j++){ 3 if(j ...
- html5--2.9新的布局元素(6)-figure/figcaption
html5--2.9新的布局元素(6)-figure/figcaption 学习要点 了解figure/figcaption元素的语义和用法 通过实例理解figure/figcaption元素的用法 ...
- codeforces 622E E. Ants in Leaves(贪心+dfs)
题目链接: E. Ants in Leaves time limit per test 2 seconds memory limit per test 256 megabytes input stan ...
- 编写html页面时常见的问题（二）
这次我接着说几个编写页面时常见的另外几个问题. 不能水平居中对齐 在我们写页面的时候,会遇到一些小细节就是不能水平居中对齐,这种情况影响了页面的美观,这也是写页面的质量不过关的一个体现,其实这种情况的 ...
- django 多数据库配置
在django项目中, 一个工程中存在多个APP应用很常见. 有时候希望不同的APP连接不同的数据库,这个时候需要建立多个数据库连接. 1. 修改项目的 settings 配置 在 settings. ...
- 规划ASM DISK GROUP、查看asm 磁盘当前状态、mount or dismount 磁盘组、检查磁盘组 metadata 的内部一致性
规划ASM DISK GROUP: 1. 每个磁盘组里的磁盘应该大小.性能.新旧等一致,不能有太大差距 2. 对database files 和 fast recovery area 分别创建不同的d ...
- BZOJ2028：[SHOI2009]会场预约（平衡树版）
浅谈\(splay\):https://www.cnblogs.com/AKMer/p/9979592.html 浅谈\(fhq\)_\(treap\):https://www.cnblogs.com ...