共计 1556 个字符，预计需要花费 4 分钟才能阅读完成。
案例：html
<form id=”myForm” action=”” method=”post”>
名字 :<input type=”text” name=”name”>
密码 :<input type=”password” name=”psw”>
上传视频和文件：<input type=”file” name=’file’ id=’two’ ref=’file’>
</form>
<button class=”one”> 提交 </button>
<button class=”three”> 清空文件信息 </button>
js
<script>
$(‘.one’).click(function(){
// 这是获得已经存在的表单数据
var form = document.getElementById(“myForm”);
var formData = new FormData(form);
// 我们可以根据 name 属性来访问表单中的字段
var name = formData.get(“name”); // 获取名字
var psw = formData.get(“psw”); // 获取密码
var file = formData.get(“file”);// 获取文件信息
console.log(‘ 已存在表单信息 ’)
console.log(name?name:’ 空 ’)
console.log(psw?psw:’ 空 ’)
console.log(file?file:” 空 ”)
// 这是设置的表单数据
var formData1 = new FormData();
// 我们可以根据 name 属性来访问表单中的字段
formData1.append(“name”,’ 胡云溪 ’); // 设置名字
formData1.append(“psw”,’huyunxi’); // 设置密码
formData1.append(“file”,’ 设置的表单文件信息 ’);// 设置文件信息
var name1 = formData1.get(“name”); // 获取名字
var psw1 = formData1.get(“psw”); // 获取密码
var file1 = formData1.get(“file”);// 获取文件信息
console.log(‘ 设置表单信息 ’)
console.log(name1)
console.log(psw1)
console.log(file1)
})
// 不同方法获得文件信息，在 vue 中使用
$(‘#two’).click(function($event){
// 知道 $event 是什么
console.log(‘$event’,$event)
// 触发这个事件的元素是什么
console.log(‘$event.target’,$event.target)
// 触发这个事件元素的文件信息
console.log(‘$event.target.files[0]’,$event.target.files[0])
})
$(‘.three’).click(function(){
// 清空文件信息
$(‘#two’).val(”)
//vue 获取 input 框中的 files 属性, 清空文件信息
//this.$refs.xxx.value=”, 在 vue 中 this 指的是 vue 整体。
})
</script>
方法一：结果一，初始化：结果二，有数据：方法二：初始化：有数据：二、在 vue 获取 input 框中的 files 属性 template 中：
<input type=”file” ref=”img” @change=”addImg” name=”file”>
methods 中：
addImg(){
console.log(this.$refs.img.value)
},
我推荐这篇文章 FormData 用法详解：https://blog.csdn.net/zqian19…，写的很详细
