美文网首页
[js]FormData对象的作用及用法

[js]FormData对象的作用及用法

作者: 泉落云生 | 来源:发表于2018-07-26 19:59 被阅读32次

一、作用

1.用一些键值对来模拟一系列表单控件:即把form中所有表单元素的name与value组装成
一个queryString。

  1. 异步上传二进制文件。

二、使用

FormDataPrototype.png
let form = new FormData();
form.append('name','value')//添加 name:value
form.get('name')//获取value
form.append('name','zhangsan')添加
form.getAll('name')//array获取所有
form.set('name','logger')//设置
form.getAll('name')//logger
form.has('name')//true
form.delete('name')
form.has('name')//false

jq实践

var selectedFile = $('#input').get(0).files[0];
$('#choose option:selected').val()
var params = new FormData();
params.append('id',$('#pop').attr('data-id'));
params.append('status',$('input[name="status"]:checked').val());
params.append('remark',$('textarea[name="remark"]').val());
params.append('invoiceImage',$('#upfile').get(0).files[0]) //文件
$.ajax({
    url:'/staff/fee/invoice/update',
    data:obj,
    type:'post',
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    processData: false,
    contentType: false,
    success:function(res){
        if(res.errCode == 0){
            tipshow('提交成功')
            layer.closeAll();
            location.reload()
        }else{
            tipshow(res.errMsg,'warn')
        }
    }
})

相关文章

网友评论

      本文标题:[js]FormData对象的作用及用法

      本文链接:https://www.haomeiwen.com/subject/cpedmftx.html