一般想要不刷新页面提交数据时,可以使用ajax提交。如果数据量不大可以自己写json数据用ajax提交到后台服务,但是数据量多且需要动态添加数据时,自己写json格式数据就有点麻烦了,这时候就需要FormData来替我们完成数据的装载了。
Html上传视频文件(vue)
<input type="file" class="upload uploadfile" v-on:change="fileChange" accept="video/*" name="upload" >
1、FormData动态添加数据
var fileObj = $(this.$el).find(".uploadfile")[0].files[0]; // js 获取文件对象
var formData = new FormData(); // FormData 对象
formData.append("file", fileObj); // 文件对象
//append()以键值对的形式往FormData塞数据
2、使用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)=> {
}
});
}
}