前端-WebAPI接口-FormData对象的使用(模拟表单用于发送数据及上传文件)

Posted 2023-06-08 Chobits

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端-WebAPI接口-FormData对象的使用(模拟表单用于发送数据及上传文件)相关的知识，希望对你有一定的参考价值。

一、概述

FormData对象的使用：

用一些键值对来模拟一系列表单控件：即把form中所有的元素的name与value组成一个queryString。
异步上传二进制文件。

二、使用

创建一个空对象实例。

javascript
复制代码
```
var myform = new FormData();
```

使用已有的表单来初始化

 
html复制代码

<form id="myForm" action="" method="post">
	<input type="text" name="name">名字
 	<input type="password" name="psw">密码
	<input type="submit" value="提交">
</form>

可以使用这个表单元素作为初始化参数，来实例化FormData对象

 
javascript复制代码

// 获取页面已有的一个form表单
var form = document.getElementById("myForm");
// 用表单来初始化
var formData = new FormData(form);
// 我们可以根据name来访问表单中的字段
var name = formData.get("name"); // 获取名字
var psw = formData.get("psw"); // 获取密码
// 当然也可以在此基础上，添加其他数据
formData.append("token","kshdfiwi3rh");

API操作

3.1、取值

javascript
复制代码
```
formData.get("name"); // 获取key为name的第一个值
formData.getAll("name"); // 返回一个数组，获取key为name的所有值
```
3.2、添加数据

通过append(key,value)来添加数据，如果指定的key不存在则会新增一条数据，如果key存在，则追加到数据末尾

javascript
复制代码
```
formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k1", "v1");

formData.get("k1"); // "v1"
formData.getAll("k1"); // ["v1","v2","v1"]
```
3.3、设置修改数据

通过set(key,value)来设置修改的数据，如果指定的key不存在则会新增一条，如果存在，则会修改对应的value值

javascript
复制代码
```
formData.append("k1", "v1");
formData.set("k1", "1");
formData.getAll("k1"); // ["1"]
```
3.4、判断是key是否存在

通过has(key)判断key对应的键值对是否存在，存在返回值为true，不存在返回值为false

javascript
复制代码
```
formData.append("k1", "v1");
formData.append("k2",null);

formData.has("k1"); // true
formData.has("k2"); // true
formData.has("k3"); // false
```
3.5、删除数据

通过delete(key)删除key对应的键值对

javascript
复制代码
```
formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k1", "v1");
formData.delete("k1");

formData.getAll("k1"); // []
```
3.6、遍历

3.6.1、每调用一次next()返回一条数据，数据的顺序由添加的顺序决定

3.6.2、返回的是一个对象，当其done属性为true时，说明已经遍历完所有的数据，这个也可以作为判断的依据

3.6.3、返回的对象的value属性以数组形式存储了一对key/value，数组下标0为key，下标1为value，如果一个key值对应多个value，会变成多对key/value返回

javascript
复制代码
```
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
```

发送数据到后台

 
html复制代码

<!--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>

4.1、原生ajax

 
javascript复制代码

//原生js上传文件
//获取按钮
var btn = document.querySelector(\'[type=button]\');
//绑定事件
btn.onclick = function () 
    //获取input标签
    var file = document.querySelector(\'[type=file]\');
    // 新建FormData对象
    var formData = new FormData();
    // 取得input标签中的文件。注：input标签中的文件可以选择多个
    formData.append(\'upload\', file.files[0]);
	//创建XMLHttpRequest，用这个来发送数据
    var xhr = new XMLHttpRequest;
    /*初始化HTTP请求参数(请求方式,url,是否同步)*/
    xhr.open(\'post\', \'file.php\');
	
	/*
	xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	设置请求头的contentType
	*/
	
    // 监听上传进度
    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 () 
    //status状态为200 表示请求成功，readystate为4表示对象传递完毕或者准备就绪 
            if(xhr.readyState == 4 && xhr.status == 200)

4.2、jq ajax

 
js复制代码

//绑定提交事件
function upload() 
    //获取form表单元素
    var f = document.getElementById("myForm");
    //使用表单元素来构造FromData
    var myform = new FormData(f);
    $.ajax(
        url: "/Library/test/upload",
        type: "post",
        dataType: "json",
        data: myform,
        cache: false,                      // 不缓存
        processData: false,                // jQuery不要去处理发送的数据
        contentType: false,                // jQuery不要去设置Content-Type请求头
        success: function (data) 
            console.log(data);
        
    );

4.3、axios

 
javascript复制代码

//不需要html板块方式
//注意：input type="file" 需要通过用户主观点击某块元素触发事件，不可页面加载完成调用，被动调用报错：File chooser dialog can only be shown with a user activation.（翻译：文件选择器对话框只能在用户激活时显示。）
function upImg()
    const inp = document.createElement("input");
	const _this = this
	inp.type = "file";
	inp.click();
	inp.onchange = function(e) 
  		console.log(e.target.files[0]);
  		let params = new FormData(); //创建form对象
  		params.append("file", e.target.files[0]);
  		_this.$axios.post("/api/Base/uploadImg", params).then(res => 
      		console.log(res)
    	).catch(err => 
      	console.log(err);
    	);

作者：juehm
链接：https://juejin.cn/post/6883075569502371848
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

其他参考文章:

FormData 对象的使用 - Web API 接口参考 | MDN

FormData() - Web API 接口参考 | MDN

FormData

FormData使用方法详解 - 简书

webapi

typora-copy-images-to: media

第02阶段.前端基本功.前端基础.入门语法

基础语法

学习目标

理解
- 了解DOM中常用的操作
- 了解document对象
重点
- 掌握DOM中获取元素的常用方法
- 掌握如何给元素注册事件
- 掌握DOM中常用的非表单属性

1.认识DOM

**概念: **文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。

DOM的设计是以对象管理组织（OMG）的规约为基础的，因此可以用于任何编程语言。Dom技术使得用户页面可以动态地变化，如可以动态地显示或隐藏一个元素，改变它们的属性，增加一个元素等，Dom技术使得页面的交互性大大地增强。

通俗理解: 把页面上的内容转换成对象的形式,通过操作对象,达到操作页面上标签和标签属性的一组方法

2. DOM 中常用的操作

获取元素
对元素进行操作(设置其属性或调用其方法)
动态创建元素
给元素注册事件

3. document对象

**概念: **document对象代表在浏览器中加载的页面

4.获取页面中的元素

什么是元素?

html中的标签在DOM中称为元素

为什么要获取页面上的元素呢?

因为:我们想要操作页面上的元素,首先需要获取到对应的元素，然后才能进行后续操作

4.1 根据id获取元素

语法: document.getElementById(\'id名\');

作用: 在整个文档中查找id名为传入的值的元素,如果没有返回null

//html
<div id="box"></div>

//js
//在整个文档中查找id为box的元素
var div = document.getElementById(\'box\');
console.log(div);  //返回的是对应的元素

4.2 根据标签名获取元素

语法: document.getElementsByTagName(\'标签名\');

作用: 在整个文档中查找所有标签名为传入的值的元素,将这些所有符合条件元素的存放到一个伪数组中返回出来,如果没有就返回一个空的伪数组

//html
<div>div1</div>
<div>div2</div>
<div>div3</div>
//js
//在整个文档中查找所有的div标签
var divs = document.getElementsByTagName(\'div\');
for (var i = 0; i < divs.length; i++) {
  var div = divs[i];
  console.log(div);
}

小结:

通过document这个对象调用获取元素的方法
getElementById 返回的是对应的DOM元素, 如果没有返回null
getElementsByTagName 返回的是存储DOM元素的伪数组,如果没有返回空的伪数组

5.事件

5.1 什么是事件?

用户点击页面上的某个元素,或者表单上的某个文本框获得焦点等等,这些都是事件

5.2 为什么要学习事件?

因为作为一个网页开发者,我们要实现当用户点击某个元素时,我们要去实现对应的需求,所以我们要学习事件

5.3 如何实现这种需求呢?

5.3.1 事件的三要素

事件源 : 监听事件的元素
事件名 : 监听的事件类型
事件处理函数 : 触发事件时,要调用的函数

5.3.2 如何注册事件

语法: 事件源.on + 事件名 = 事件处理函数

element.onclick = function(){}

//html
<div id="box" style="width:100px; height:100px; background-color: red"><div>
    
//js
var box = document.getelementById(\'box\');
//
box.onclick = function(){
    console.log(1);
}

5.4 给a标签注册事件时,需要注意的问题

a标签是超链接标签,在开发网页中,尽量多的使用a标签有利于网页的SEO,所以我们在做动态效果时,要经常给a标签注册点击事件

那么给a标签注册事件,到底要注意什么问题呢?

//html 
<a href = "" id = "link">点击在控制台打印数字1</a>

//js
var link = document.getElementById(\'link\');
link.onclick = function(){
    console.log(1);
}

//当我们执行了以上代码之后,我们发现在控制台并没有看到数字1.

//原因: 因为a标签是超链接标签,超链接标签默认是用来做页面跳转的,虽然我们没有在href属性中书写正确的url地址,但是当我们点击a标签时,页面也会重新刷新。所以当我们点击a标签时,触发了事件处理函数,并且执行了console.log(1)这行代码,但是当这行代码执行完毕之后,很快a标签的默认行为导致浏览器重新刷新了一遍,由于执行的速度非常快,所以我们肉眼根本看不到控制台上输出的1.

//所以为了解决这个问题,我们需要阻止a标签默认行为执行

link.onclick = function(){
    console.log(1);
    return false; //在事件处理函数中的最后一行写return false,就会阻止a标签默认行为的执行
}

6. DOM中常用的非表单元素属性

6.1 为什么要学习DOM中常用的非表单元素属性?

因为: 我们学习DOM就是为了通过访问元素的属性或者方法,来动态的改变元素的状态,比如,用js修改a标签href属性的值

6.2 常用的非表单元素属性有哪些?

href 超链接的url地址
title 标签的标题属性
id 标签的id属性
src 引入外部文件的路径
innerText 标签内的文本
innerHTML 标签内的内容

6.3 获取属性的值/设置属性的值

//html
<img src = "1.jpg" title="示例" id="img">
    
var img = document.getElementById(\'img\');
console.log(img.title) // 获取属性的值
img.title = \'动态修改\'  //设置属性的值
img.src = \'2.jpg\' //这行代码执行之后,会展示2.jpg的图片

案例: 点击按钮,切换图片

6.4 innerText 和 innerHTML

**作用: ** 给双标签的元素设置内容/获取双标签里面的内容

不同点:

innerText 只是用于获取文本或设置文本

innerHTML 不仅可以用于设置/获取文本,还可以识别html

相同点:

如果是赋值的话,都会覆盖元素内本身的内容

**注意: **

这两个是用于双标签的属性

7. 课后综合练习

美女相册

8. 扩展内容@

8.1 定义id属性的元素,不获取直接使用

由于id名具有唯一性，部分浏览器支持直接使用id名访问元素，但不是标准方式，生产环境下(上线了)不推荐使用。

//html
<div id="box"></div>

//js
box.onclick = function(){
    console.log(1);
}

8.2 获取页面元素的其他方式

8.2.1 根据name属性获取元素 (有兼容问题,不同的浏览器实现不同)

在IE和Opera中， getElementsByName() 方法还会返回那些id为指定值的元素。

语法: document.getElementsByName(\'name属性的值\')

**作用: ** 在整个文档中查找所有name属性值为传入的值的元素,将这些所有符合条件元素的存放到一个伪数组中返回出来,如果没有就返回一个空的伪数组

//html
<input type="checkbox" name="hobby">

//js
var inputs = document.getElementsByName(\'hobby\');
//返回一个伪数组
for (var i = 0; i < inputs.length; i++) {
  var input = inputs[i];
  console.log(input);
}

8.2.2 根据类名获取元素 (有兼容问题,ie9+支持)

语法: document.getElementsByClassName(\'类名\')

**作用: ** 在整个文档中查找所有class属性值为传入的值的元素,将这些所有符合条件元素的存放到一个伪数组中返回出来,如果没有就返回一个空的伪数组

//html
<div class="main"></div>
    
//js
var mains = document.getElementsByClassName(\'main\');
//返回一个伪数组
for (var i = 0; i < mains.length; i++) {
  var main = mains[i];
  console.log(main);
}

8.2.3 根据选择器获取元素 (有兼容问题,ie8+支持)

语法: document.querySelector(\'选择器\');

作用: 在整个文档中查找所有符合选择器值的元素,但是只返回其中的第一个元素,如果没有返回null

注意: 如果想要所有符合选择器值的元素,请使用 querySelectorAll方法

querySelectorAll返回的是一个伪数组,如果没有则返回空的伪数组

//html
<div class="element">div1</div>
<div class="element">div2</div>
<div class="element">div3</div>

//js
//在整个文档中,查找类名为element的元素,
var div = document.querySelector(\'.element\');
console.log(div); //返回的是所有符合条件中的第一个

var divs = document.querySelectorAll(\'.element\');
//返回的是一个伪数组, 伪数组中存储了所有符合条件的元素
for (var i = 0; i < divs.length; i++) {
  var box = divs[i];
  console.log(box);
}

8.3 DOM中元素可以使用的获取元素的方法

element.getElementsByTagName(\'标签名\')

element.getElementsByClassName(\'类名\')

element.querySelector(\'选择器\')

element.querySelectorAll(\'选择器\')

//以上这些方法也可以使用获取到的DOM对象调用
//使用document调用这些方法是在整个页面中查找
//使用获取到的DOM对象调用这些方法,是在当前DOM对象的里面查找


//html
<div>中国</div>
<div id="center">
    北京
	<div>昌平</div>
	<div>海淀</div>
</div>

//js
var center = document.getElementById(\'center\');
var divs = center.getElementsTagName(\'div\');
console.log(divs); //返回的伪数组中只有昌平和海淀

8.4 innerText 和 innerHTML的兼容问题

innerHTML是非标准属性(非w3c标准),但是所有的浏览器都支持
innerText属性存在兼容性问题,早期的火狐浏览器不支持该属性,使用textContent替代

以上是关于前端-WebAPI接口-FormData对象的使用(模拟表单用于发送数据及上传文件)的主要内容，如果未能解决你的问题，请参考以下文章

前端向后端发送请求（FormData）

formdata后端只读到file

webapi

springboot2之文件上传接口两种实现（后端调用直接传输文件流和前端ajax调用支持Formdata）

FormData 对象的使用

FormData对象

前端-WebAPI接口-FormData对象的使用(模拟表单用于发送数据及上传文件)

一、概述

二、使用

创建一个空对象实例。

使用已有的表单来初始化

API操作

3.1、取值

3.2、添加数据

3.3、设置修改数据

3.4、判断是key是否存在

3.5、删除数据

3.6、遍历

3.6.1、每调用一次next()返回一条数据，数据的顺序由添加的顺序决定

3.6.2、返回的是一个对象，当其done属性为true时，说明已经遍历完所有的数据，这个也可以作为判断的依据

3.6.3、返回的对象的value属性以数组形式存储了一对key/value，数组下标0为key，下标1为value，如果一个key值对应多个value，会变成多对key/value返回

发送数据到后台

4.1、原生ajax

4.2、jq ajax

4.3、axios

webapi

typora-copy-images-to: media

基础语法

学习目标

1.认识DOM

2. DOM 中常用的操作

3. document对象

4.获取页面中的元素

4.1 根据id获取元素

4.2 根据标签名获取元素

小结:

5.事件

5.1 什么是事件?

5.2 为什么要学习事件?

5.3 如何实现这种需求呢?

5.3.1 事件的三要素

5.3.2 如何注册事件

5.4 给a标签注册事件时,需要注意的问题

6. DOM中常用的非表单元素属性

6.1 为什么要学习DOM中常用的非表单元素属性?

6.2 常用的非表单元素属性有哪些?

6.3 获取属性的值/设置属性的值

6.4 innerText 和 innerHTML

7. 课后综合练习

8. 扩展内容@

8.1 定义id属性的元素,不获取直接使用

8.2 获取页面元素的其他方式

8.2.1 根据name属性获取元素 (有兼容问题,不同的浏览器实现不同)

8.2.2 根据类名获取元素 (有兼容问题,ie9+支持)

8.2.3 根据选择器获取元素 (有兼容问题,ie8+支持)

8.3 DOM中元素可以使用的获取元素的方法

8.4 innerText 和 innerHTML的兼容问题