html部分:

  //input type设为file
<input type="file" name="file" id="fileInputElement" />
<button id="submit">提交</button>

script部分

   var btn = document.getElementById('submit');
var fileInputElement = document.getElementById('fileInputElement'); btn.onclick = function () { var oMyForm = new FormData();
//append来添加文件,
oMyForm.append("afile", fileInputElement.files[]); var oReq = new XMLHttpRequest(); oReq.open("POST", "/test"); //用FormData生成的对象的好处是,send不需要setRequestHeader
oReq.send(oMyForm);
}

后台nodejs部分

const app = express();
const multer = require('multer');
var upload = multer({dest:'file/'})//multer的参数dest表示文件接受后存放的地址 app.post('/test',upload.single('afile'),(req,res)=>{ })
 
 

ajax传文件用express的multer接住的更多相关文章

  1. nodejs --- 上传文件并保存到磁盘

    先复习下整个请求的过程 const express = require('express'); const static = require('express-static'); const cook ...

  2. express搭建web服务器、路由、get、post请求、multer上传文件、EJS模板引擎的使用

    express官网 postman工具下载地址  multer的npm文档地址 express模板引擎怎么使用  地址:http://www.expressjs.com.cn/guide/using- ...

  3. ajax上传文件显示进度

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

  4. nodejs express 上传文件 (格式 FormData)

    前台代码使用jQuery的ajax: <script type="text/javascript"> $(function(){ $('#file_upload').c ...

  5. 关于ajax 异步文件上传 node 文件后台接口

    <body> <img src="" alt="" id="img"> <input type="f ...

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

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

  7. 1. Django系列之Django与ajax上传文件

    html代码如下: <div class="form-group"> <label for="exampleInputFile">附件上 ...

  8. Ajax方式上传文件

    用到两个对象 第一个对象:FormData 第二个对象:XMLHttpRequest 目前新版的Firefox 与 Chrome 等支持HTML5的浏览器完美的支持这两个对象,但IE9尚未支持 For ...

  9. 很方便的后台ajax上传文件

    <a href="javascript:void(0);" url="{:U('teacherd?id='.$vo['id'])}" class=&quo ...

随机推荐

  1. 唤醒 App

    一.Deep Link 1.什么是 Deep Link? Deep Link 是 App 的深度连接,当单击链接或编程请求调用Web URI意图时,Android系统按顺序依次尝试以下每一个操作,直到 ...

  2. 【vue-cli 3.0】 vue.config.js配置 - 路径别名

    如何配置vue-cli 3中vue.config.js的路径别名? 前段时间更新电脑重装了一下vue-cli,发现了vue-cli已经更新到3.0版.用来搭建项目后发现简化了很多,而且配置文件现在可以 ...

  3. git概述(二)

    分支管理 分支在实际中有什么用呢?假设你准备开发一个新功能,但是需要两周才能完成,第一周你写了50%的代码,如果立刻提交,由于代码还没写完,不完整的代码库会导致别人不能干活了.如果等代码全部写完再一次 ...

  4. 阅读《Effective Java》每条tips的理解和总结(1)

    <Effective Java>这本书的结构是90来条tips,有长有短,每条tip都值的学习.这里根据对书中每条tip的理解做简短的总结,方便日后回顾.持续更新~ 1. 考虑用静态方法代 ...

  5. 命令——tree

    tree——以树形结构显示目录文件 [root@centos71 ~]# yum provides tree Loaded plugins: fastestmirror Loading mirror ...

  6. #431 Div2 Problem B Tell Your World (鸽巢原理 && 思维)

    链接 : http://codeforces.com/contest/849/problem/B 题意 : 给出 n 个在直角坐标系上的点,每个点的横坐标的值对应给出的顺序序数,比如 1 2 4 3 ...

  7. 又联考了一场,感觉自己好菜啊,T1没写出来,后来花了一个早上调试。QAQ。最后发现是个-1还有取模没打。。。TAT。。。难受极了!!!

    简单的区间(interval) 题目描述: 样例输入: 样例1: 4 3 1 2 3 4 样例2: 4 2 4 4 7 4 样例输出: 样例1: 3 样例2: 6 提示: 时间限制:1000ms 空间 ...

  8. Altera培训SignalTap II的使用--笔记

    培训的内容有点多(啰嗦)(笔记为截图) 听课笔记:Altera培训SignalTap II的使用--笔记

  9. c++复习——类(1)

    1.  拷贝构造函数 //并没有搞懂 先存着吧  遇到实际情况再回来看看 拷贝构造函数在以下三种情况被调用: (1)当用一个已经初始化过的对象去初始化同类另一个对象时, 拷贝构造函数被调用. Samp ...

  10. android发送udp,tcp消息

    发送方创建步骤: 1.  创建一个DatagramSocket对象 DatagramSocket socket = new  DatagramSocket (4567); 2.  创建一个 InetA ...