获得表单自定义上传文件信息（视频，图片）

案例：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…，写的很详细