我要评论FormData 对象的作用
- 模拟HTML表单，相当于将HTML表单映射成表单对象，自动将表单对象中的数据拼接成请求参数的格式
- 异步上传二进制文件
formData 对象的使用
1、准备 HTML 表单
<form id ="form">
<input type = "text" name ="username" />
<input type = "password" name ="username" />
<input type = "button" id= "btn" />
</form>
var form = document.getElementById("form")
var btn = document.getElementById("btn")
btn.onclick = function(){
// 讲普通的 HTML 表单转坏为 表单对象
var formData = new FormData (form);
// 创建ajax 对象
var xhr = new XMLHttpRequest();
// 对ajax对象进行配置
xhr.open("post"," 地址")
xhr.send(formData )
// 监听 xhr 对象 下面 的 onlod 事件
xhr,onload = function () {
// 对象http 状态码 进行判断
if (xhr.status == 200 ) {
}
}
}
实例方法
formData 对象的实例方法 操作的是name的值
注意： set 方法和 append 方法的区别是 在属性已经存在的情况 下 set 会覆盖已有的值 append 会保留两个值
1、获取表单对象中的值
formData.get("key")
2、设置表单对象中的属性值
formData.set("key" ，“value”)
3、删除表单表单对象属性的值
formData.delete("key")
4、向表单对象中追加属性的值
formData.append("key","value")
FormData 二进制文件上传
<input type ="file" id ="file"/>
var file = document.getElmentByid('file')
// 当用户选择文件的时候
file.onchang = function () {
// 将用户选择的二进制文件追加到表单对象中
formData.append("attrName",this.files[0]);
// 配置 ajax对象 请求方式必须为 post
xhr.open("post","www.example.com");
}
formData 文件上传进度展示
// 当用户选择文件的时候
file.onchange = function () {
// 文件上传过程中持续触发 onprogress事件
xhr.upload.onprogress = function (ev) {
// 当前上传文件大小/文件总大小 再将结果转换为百分数
// 将结果赋值给进度条的宽度属性
bar。style.width = (ev.loaded / ev.total) * 100 + "%"
}
}
FormData 文件上传图片即时预览
在我们将图片上传到服务端以后 服务端通常会将图片地址作为响应数据传递到客户端，客户端可以从相应数据中获取图片地址，然后将图片再展示在页面中
本文地址：https://blog.csdn.net/qq_38686150/article/details/107899970
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！
网友评论