FormData对象

2024-01-18 09:12:52

FormData作用

模拟HTML表单，相当于将HTML表单映射成对象，自动将表单对象中的数据拼接成请求参数格式
异步上传二进制文件

使用

准备HTML表单

<form id='form'>
	<input type='text' name='username'/>
    <input type='password' name='password'/>
    <input type='button'/>
</form>

将HTML表单转换为FormData对象

var from = document.getElementById('form');
var formData = new FormData(form);

提交表单

xhr.send(formData); //只可以发送post请求

<body>
    <form>
    	<input type='text' name='username'/>
    	<input type='password' name='password'/>
    	<input type='button'/ id='btn' value='提交'>
    </form>
    <script>
    	//获取按钮
        var btn = document.getElementById('btn');
        // 获取表单对象
        var from = document.getElementById('form');
        // 添加点击事件
        btn.onclick = function (){
            // 将HTML表单转换为FormData对象
			var formData = new FormData(form);
            // 创建ajax对象
            var xhr = new XMLHttpRequest();
            xhr.open('post','url address');
            xhr.send(formData);
            xhr.onload = function(){
                if (xhr.status == 200){
                    console.log(xhr.responseText);
                }
            }
        }
    </script>
</body>

FormData对象实例方法

formData.get('key')：获取表单对象中属性的值（用来获取用户输入的值）
formData.set('key','value')：设置表单对象中的值（用于表单二次处理）
fromData.delete('key')：删除表单对象中的值
formData.append('key','value')：向表单中追加属性（与set的区别，属性名称存在的情况下，set会覆盖，而append会创建两个值）

FormData上传二进制文件

<input type='file' id='file'/>

var file = documentElementById('file');
// 当用户选择文件时触发
file.onchange = function(){
    // 创建空表单对象
    var formData = new FormData();
    // 将用户选择的二进制文件追加到form对象中
    formData.append('attrName',this.files[0]);
    var xhr = new XMLHttpRequest();
    xhr.open('post','url address'); // 设置post请求
    xhr.send(formData);
}

码农公寓

FormData作用

使用

FormData对象实例方法

FormData上传二进制文件

相关文章