new FormData() - FormData对象的作用及用法
一、概述
FormData 对象的使用:
1.用一些键值对来模拟一系列表单控件:即把form中所有表单元素的name与value组装成
一个queryString
2. 异步上传二进制文件。
二、使用
1.FormData对象的操作方法,全部在原型中,自己本身没任何的属性及方法。
let formData = new FormData()
formData.append('user', 'zhang')
获取 formData.get('user') //zhang
删除 formData.delete('user')
.....
2.使用FormData对象发送文件
HTML部分
<form action="">
<label for="">
姓名: <input type="text" name="name">
</label>
<label for="">
文件:<input id="file" type="file" name="file">
</label>
<label for="">
<input type="button" value="保存">
</label>
</form>
JS部分
var btn = document.querySelector('[type=button]');
btn.onclick = function () {
// 文件元素
var file = document.querySelector('[type=file]');
// 通过FormData将文件转成二进制数据
var formData = new FormData();
// 将文件转二进制
*****注意2******
formData.append('upload', file.files[0]);
*****注意1******
var xhr = new XMLHttpRequest;
xhr.open('post', 'file.php');
// 监听上传进度
xhr.upload.onprogress = function (ev) {
// 事件对象
// console.log(ev); var percent = (ev.loaded / ev.total) * 100 + '%'; console.log(percent); progress.style.width = percent;
} xhr.send(formData); xhr.onreadystatechange = function () {
if(xhr.readyState == 4 && xhr.status == 200) {
//
}
}
}
注意1:使用jQuery
$.ajax({
url: 'file.php',
type: 'POST',
data: formdata, // 上传formdata封装的数据
dataType: 'JSON',
cache: false, // 不缓存
processData: false, // jQuery不要去处理发送的数据
contentType: false, // jQuery不要去设置Content-Type请求头
success:function (data) { //成功回调
console.log(data);
}
});
注意2:参数
new FormData的参数是一个DOM对象,而非jQuery对象
var formData = new FormData($("#file")[0]);
三、jQuery的参数序列化方法serialize()
序列表表格内容为字符串,用于 Ajax 请求。
$("form").serialize()
转:https://segmentfault.com/a/1190000012327982
相关: https://www.cnblogs.com/fps2tao/p/9760781.html
new FormData() - FormData对象的作用及用法的更多相关文章
- JSP九大内置对象的作用和用法总结?
JSP九大内置对象的作用和用法总结? 1.request对象javax.servlet.http.HttpServletRequest request对象代表了客户端的请求信息,主要用于接受通过HTT ...
- JSP九大内置对象的作用和用法总结【转】
JSP九大内置对象的作用和用法总结? JSP中一共预先定义了9个这样的对象,分别为:request.response.session.application.out.pagecontext.c ...
- JSP九大内置对象的作用和用法总结(转)
SP中一共预先定义了9个这样的对象,分别为:request.response.session.application.out.pagecontext.config.page.exception 1.r ...
- JSP九大内置对象的作用和用法总结(转发)
jsp九大内置对象: 内置对象/作用域(每一种作用域的生命周期是不一样的): 1, application 全局作用域 2, session 会话作用域 3, request 请求作用域 4, pag ...
- H5 FormData对象的作用及用法
JS: function uploadFileAndParam() { var url = "http://localhost:42561/api/upload/UploadPost&quo ...
- FormData js对象的介绍和使用
FormData js对象的介绍和使用 FormData对象,可以把所有表单元素的name与value组成一个queryString,提交到后台. 在使用ajax提交时,使用FormData对象可以减 ...
- AFNetwork作用和用法详解
AFNetwork是一个轻量级的网络请求api类库.是以NSURLConnection, NSOperation和其他方法为基础的. 下面这个例子是用来处理json请求的:NSURL *url = [ ...
- serialVersionUID, ObjectInputStream与ObjectOutputStream类,Serializable接口,serialVersionUID的作用和用法
ObjectInputStream与ObjectOutputStream类所读写的对象必须实现Serializable接口,对象中的transient和static类型成员变量不会被读取和写入 Ser ...
- Linq中关键字的作用及用法
Linq中关键字的作用及用法 1.All:确定序列中的所有元素是否都满足条件.如果源序列中的每个元素都通过指定谓词中的测试,或者序列为空,则为 true:否则为 false. Demo: 此示例使用 ...
随机推荐
- Mac下进行基于java服务端语言的微信公众号本地js-sdk调试的大致方法
开发微信公众号应用调用js-sdk,需要先在微信公众号后台配置可信域名,之后从微信的入口地址重定向到改域名下的路径后便会返回code,之后可以拿到一系列需要的参数等等.那么本地开发,如果使用的是PHP ...
- html 中shadow DOM 的使用
什么是shadow DOM? An important aspect of web components is encapsulation — being able to keep the marku ...
- Kettle资源库采用SQLserver数据库需要注意的点
Kettle开源ETL工具有着自己的元数据存储方式,可以分为两种 1:File 2:DB 文件存储我这里就不多说了,下面说一下在用SQLserver2008 R2作为资源库在创建的过程中遇到的问题 K ...
- C++中无法解析的外部符号错误
在编译C++程序的时候,如果引用了对应的头文件,但是调用一个函数的时候仍然出现" 无法解析的外部符号错误"的编译错误,比如: 无法解析的外部符号__imp__PathFileE ...
- Mac 显示和隐藏文件
显示和隐藏文件 显示Mac隐藏文件的命令: defaults write com.apple.finder AppleShowAllFiles -bool true 隐藏Mac隐藏文件的命令: def ...
- Android MVP 构架封装
上一篇我们简单实现了一个MVP的构架,下面我们来做一个简单的封装使其使用更简单方便 源码地址RxMVP分支Tag03 最终实现目录结构如下 BasePresenter 如果每一个Activity都需要 ...
- Mysql 环境配置查询
Mysql 环境查询 1, 查看全部的引擎 a) Show engines 或者是进入到information_schama里面去查看ENGINES表 2, 查看当前用户 a) Select user ...
- wepy - 使用vsCode编辑器安装插件
完成后,高亮以及智能补全代码. 1. 首先ctrl+shift+p打开扩展,安装以下三个插件 2. 复制以下文件内容到你的vsCode配置 files.associations { "fil ...
- 修改MySQL数据文件的位置
1:查看MySQL服务名称 2:管理员启动控制台 3:修改配置文件my.ini中数据文件的位置,[注]修改完成之后要把响应的数据文件从旧目录拷贝到新目录当中. 4:重新启动服务 5:登录数据库查看数据 ...
- line-height测量及使用
1.line-height定义 line-height表示行高,即两行文字基线间的距离. 以下是图示说明: 行高是2条红线之间的距离,即:1+2+3+4 在实际测量中,基线不好找,可测量顶线到顶线的距 ...