html5 上传 原理,浅谈使用HTML5的FormData上传文件原理!!!
【书山有路勤为径,学海无涯苦作舟】
//一、FormData背景介绍
//表单提交,文件上传是一个常用又十分麻烦的功能,以前要上传文件通常都是借助插件或者flash来实现,噼里啪啦的加载一大堆东西。自从有了HTML5的FormData后,轻松解决上传问题啦。
//FormData可以把它理解成一个虚拟的表单对象,它只有一个方法append,这个可以在浏览器console一下就知道了。我们可以通过append向FormData里面添加各种需要提交的数据。
//你可以先创建一个空的 FormData 对象,然后使用 append() 方法向该对象里添加字段,如下:var oMyForm = new FormData();
//二、FormData的使用
//1、使用FormData对象发送文件
//获取页面form表单
var form = document.forms.namedItem("fileinfo");
form.addEventListener('submit', function(ev) {
var oOutput = document.querySelector("div");
//使用上面已有的表单来初始化一个对象实例
var oData = new FormData(form);
//添加数据方法append()
oData.append("CustomField", "This is some extra data");
//异步对象
var oReq = new XMLHttpRequest();
oReq.open("POST", "stash.php", true);
oReq.onload = function(oEvent) {
if(oReq.status == 200) {
oOutput.innerHTML = "Uploaded!";
} else {
oOutput.innerHTML = "Error " + oReq.status + " occurred when trying to upload your file.
";
}
};
oReq.send(oData);
ev.preventDefault();
// ev.stopPropagation()
//冒泡阶段执行,默认,从子节点传递到父节点
}, false);
//2、添加数据 --- 我们可以通过append(key, value)来添加数据,如果指定的key不存在则会新增一条数据,如果key存在,则添加到数据的末尾
//formData.append("k1", "v1");
//formData.append("k1", "v2");
//formData.append("k1", "v1");
//formData.get("k1"); // "v1"
//formData.getAll("k1"); // ["v1","v2","v1"]
//3、设置修改数据 --- 我们可以通过set(key, value)来设置修改数据,如果指定的key不存在则会新增一条,如果存在,则会修改对应的value值。
//formData.append("k1", "v1");
//formData.set("k1", "1");
//formData.getAll("k1"); // ["1"]
//4、判断是否有该数据 --- 我们可以通过has(key)来判断是否对应的key值
//formData.append("k1", "v1");
//formData.append("k2",null);
//formData.has("k1"); // true
//formData.has("k2"); // true
//formData.has("k3"); // false
//5、删除数据 --- 通过delete(key),来删除数据
//formData.append("k1", "v1");
//formData.append("k1", "v2");
//formData.append("k1", "v1");
//formData.delete("k1");
//formData.getAll("k1"); // []
//6、遍历 --- 可以通过entries()来获取一个迭代器,然后遍历所有的数据,
//var formData = new FormData()
//formData.append("k1", "v1");
//formData.append("k1", "v2");
//formData.append("k2", "v1");
//var i = formData.entries();
//i.next(); // {done:false, value:["k1", "v1"]}
//i.next(); // {done:fase, value:["k1", "v2"]}
//i.next(); // {done:fase, value:["k2", "v1"]}
//i.next(); // {done:true, value:undefined}
/*
* 可以看到返回迭代器的规则:
*每调用一次next()返回一条数据,数据的顺序由添加的顺序决定
*返回的是一个对象,当其done属性为true时,说明已经遍历完所有的数据,这个也可以作为判断的依据
*返回的对象的value属性以数组形式存储了一对key/value,数组下标0为key,下标1为value,如果一个key值对应多个value,会变成多对key/value返回
*
* 也可以通过values()方法只获取value值
* */
。。。【待大神指点一二】
html5 上传 原理,浅谈使用HTML5的FormData上传文件原理!!!相关推荐
- Java 线上问题排查神器 Arthas 快速上手与原理浅谈
[Arthas 官方社区正在举行征文活动,参加即有奖品拿哦~点击投稿] 作者 | 杨桢栋,笔名叫蛮三刀把刀,是一名一线互联网码农,留美访学一年,主要关注后端开发,数据安全,爬虫,物联网,边缘计算等方向 ...
- Java线上问题排查神器Arthas快速上手与原理浅谈
前言 当你兴冲冲地开始运行自己的Java项目时,你是否遇到过如下问题: 程序在稳定运行了,可是实现的功能点了没反应. 为了修复Bug而上线的新版本,上线后发现Bug依然在,却想不通哪里有问题? 想到可 ...
- 深度学习 | BN层原理浅谈
深度学习 | BN层原理浅谈 文章目录 深度学习 | BN层原理浅谈 一. 背景 二. BN层作用 三. 计算原理 四. 注意事项 为什么BN层一般用在线性层和卷积层的后面,而不是放在激活函数后 为什 ...
- 汽车钥匙芯片工作原理 浅谈汽车钥匙芯片作用及分类
工程师谭军 发表于 2018-10-08 10:01:00 http://m.elecfans.com/article/791926.html 本文主要是关于汽车钥匙芯片的相关介绍,并着重对汽车钥匙芯 ...
- 浅谈WebAssmebly,在浏览器上进行图像处理
浅谈WebAssmebly,在浏览器上进行图像处理 自从2008年各大浏览器为JavaScript执行引擎加入JIT(Just in Time, 即时编译器)以来,JavaScript在浏览器的执行性 ...
- TreeMap原理(浅谈)
文章目录 一. 回顾 二. 储备知识 2.1 Comparable和Comparator 2.2 一致性hash 三. TreeMap 3.1 成员变量 3.2 静态常量 3.3 构造方法 到这里,提 ...
- php smarty 原理,php模板原理PHP模板引擎smarty模板原理浅谈
mvc是开发中的一个伟大的思想,使得开发代码有了更加清晰的层次,让代码分为了三层各施其职.无论是对代码的编写以及后期的阅读和维护,都提供了很大的便利. 我们在php开发中,视图层view是不允许有ph ...
- PS-第十二天-PS色阶的使用原理浅谈
PS色阶的使用原理浅谈 色阶是什么:色阶就是用直方图描述出的整张图片的明暗信息. 样图 如图,从左至右是从暗到亮的像素分布,黑色三角代表最暗地方(纯黑),白色三角代表最亮地方(纯白).灰色三角代表中间 ...
- 计算机仿真在机械应用,浅谈计算机仿真在机械上的应用[精选].doc
浅谈计算机仿真在机械上的应用[精选] 浅谈计算机仿真在机械上的应用 李思宏 (重庆交通大学,重庆402247) 摘要:如今计算机仿真技术在机械上有着广泛的应用,计算机仿真已然成为热门.本文用综述的形式 ...
最新文章
- TIOBE 11 月编程语言:Java 首次跌出前二,Python 势不可挡
- 基于python的界面自动化测试-Python实现性能自动化测试竟然如此简单
- 编译执行和解释执行的区别
- 树模型为什么是不能进行梯度下降
- ⑧javaWeb之在例子中学习(过滤器Filter)
- 用C#.NET调用Java开发的WebService传递int,double问题,出现java无法获
- P4302-[SCOI2003]字符串折叠【区间dp】
- codeforces 688D D. Remainders Game(中国剩余定理)
- 我爱计算机视觉干货集锦分类汇总(2019年3月9日)
- SpringCloud中 Feign结合Hystrix断路器开发。
- phpstorm 新建拉取项目_Flink1.8实时数仓项目实战
- java pdf 页面 拼接_如何使用Java平铺PDF文档中的页面内容?
- ubuntu zip文件解压失败
- 【NLP基础理论】 08 词汇语义学 Lexical Semantics
- 必看 logit回归分析步骤汇总
- 发音程序c语言,用C语言发声
- 3d设计计算机配置,专业设计师选什么电脑配置?2018年专业3D建模渲染电脑配置推荐(2)...
- 数据库 表空间详解以及其使用方法 (Oracle)
- Flink-----Flink CDC 实现数据实时同步
- flash 火狐总是崩溃_解决firefox经常出现Adobe Flash 插件已崩溃