通常想要不刷新页面提交数据时,能够使用ajax提交。若是数据量不大能够本身写json数据用ajax提交到后台服务,可是数据量多且须要动态添加数据时,本身写json格式数据就有点麻烦了,这时候就须要FormData来替咱们完成数据的装载了。vue
Html上传视频文件(vue)ajax
<input type="file" class="upload uploadfile" v-on:change="fileChange" accept="video/*" name="upload" >
一、FormData动态添加数据json
var fileObj = $(this.$el).find(".uploadfile")[0].files[0]; // js 获取文件对象 var formData = new FormData(); // FormData 对象 formData.append("file", fileObj); // 文件对象 //append()以键值对的形式往FormData塞数据
二、使用FormData和ajax配合提交表单能够实现不刷新页面,而且能够等待服务器返回结果作一些响应服务器
fileChange(e) { if (e.target.value) { var url = "http://vip.crmclick.com/API/FileData.ashx?action=video"; // 接收上传文件的后台地址 $.ajax({ url: url, type: "POST", cache: false, data: formData, processData: false,// 默认值: true 若是要发送 DOM 树信息或其它不但愿转换的信息,请设置为 false contentType: false,// 告诉jQuery不要去设置Content-Type请求头 success:(res)=> { this.src = res.url; this.$emit("save", this.src); }, error:(data)=> { } }); } }