H5 FormData对象的作用及用法

H5 FormData对象就模拟一个原始的表单格式的数据,以前上传文件非得要用个form包起来,就是和后台约定的一个传输数据格式,

FormData就是按照规定的格式,把form中所有表单元素的name与value组装成一个queryString,省去你手工拼接的工作,如果用

过jquery的话,应该知道有个表单序列号的函数,作用和它是一样的,不过FormData还提供了更多的操作方法,全部在原型中,

自己本身没任何的属性及方法。


demo:

<form enctype="multipart/form-data" id="user_info">

    <input id="uname"  name="uname">

    <input id="age"  name="age">

    <input id="sex"  name="sex">

    <input type="file" id="photo"  name="photo">

</form>


<script>

  var formdata = new FormData(user_info)   //实例FormData对象,传入form表单id,不传就是实例一个空对象

            formdata.append("height","27")                     //调用append方法可以接着追加数据,参数两个,键值对形式,相当于手工拼接

            var age= formdata.get("age")                         //调用get()方法可以获取数据

            formdata.delete("sex")                                    //调用delete方法可以删除数据

            

            还有has(),getAll(),forEach()方法。


      $.ajax({
        url: 'views/home/save.php',
        type: 'POST',
        data: formdata,                    // 上传formdata封装的数据
        dataType: 'JSON',
        cache: false,                      // 不缓存
        processData: false,                // 告诉jQuery不要去处理发送的数据
        contentType: false,                // 告诉jQuery不要去设置Content-Type请求头
        success:function (txt) {           //成功回调
            console.log(txt);
        }
    });


</script>





















猜你喜欢

转载自blog.csdn.net/FarmerXiaoYi/article/details/76999187
今日推荐