【.NET】HTML5 特性 - FromData

 FromData是在XMLHttpRequest定义的，能序列化出表单，常用有3个用途：

1.ajax上传文件域

2.对表单上的控件取值，赋值，追加，key存在，删key

3.ajax提交表单上的数据

 

例子：1.ajax上传文件域

$('input[type="file"]').on('change', function(){
            var file = this.files[0];
            var formData = new FormData($('#uploadImg')[0]);
            formData.append('file', file);
            console.log(formData.get('file'))
            $.ajax({
                url: 'b.php',
                type: 'POST',
                cache: false,
                data: formData,
                //dataType: 'json',
                //async: false,
                processData: false,
                contentType: false,
            }).done(function(res) {
                console.log(res)
            }).fail(function(res) {
                console.log(res)
            });
        });

processData：true是转换成字符串形式，false是不转换

contentType：类似dataType，但 dataType是后端返回格式，如json、text,这个是前端的发送数据格式，默认是application/x-www-form-urlencoded，false是不报错，常用的还有：

4种常见发送编码格式：
application/x-www-form-urlencoded：按照key=val形式编码
application/json：json序列化传送，WebAPI应该常用
multipart/form-data：一般用于上传文件
text/xml:xml形式

在C# ，可以用HttpPostedFile接收，然后SaveAs，简单例子：

HttpPostedFile imgFile = Request.Files["file"];
imgFile.SaveAs("路径");

 

例子：2.对表单上的控件赋值

<form id="advForm">
    <p>广告名称：<input type="text" name="advName"  value="xixi"></p>
    <p>广告类别：<select name="advType">
        <option value="1">轮播图</option>
        <option value="2">轮播图底部广告</option>
        <option value="3">热门回收广告</option>
        <option value="4">优品精选广告</option>
    </select></p>
    <p><input type="button" id="btn" value="添加"></p>
</form>

 

取值，用get()

//获得表单按钮元素
var btn=document.querySelector("#btn");
//为按钮添加点击事件
btn.onclick=function(){
    //根据ID获得页面当中的form表单元素
    var form=document.querySelector("#advForm");
    //将获得的表单元素作为参数，对formData进行初始化
    var formdata=new FormData(form);
    //通过get方法获得name为advName元素的value值
    console.log(formdata.get("advName"));//xixi
    //通过get方法获得name为advType元素的value值
    console.log(formdata.get("advType"));//1 
}

 

赋值，用set()

//通过FormData构造函数创建一个空对象
var formdata=new FormData();
//如果key的值不存在会为数据添加一个key为name值为laoliu的数据
formdata.set("name","laoli");
//通过get方法读取key为name的第一个值
console.log(formdata.get("name"));//laoli

 

追加，用append()

//通过FormData构造函数创建一个空对象
var formdata=new FormData();
//通过append()方法在末尾追加key为name值为laoliu的数据
formdata.append("name","laoliu");

 

key存在，用has()

//通过FormData构造函数创建一个空对象
var formdata=new FormData();
//通过append()方法在末尾追加key为name值为laoliu的数据
formdata.append("name","laoliu");
//判断是否包含key为name的数据
console.log(formdata.has("name"));//true

 

删key，用delete()

//通过FormData构造函数创建一个空对象
var formdata=new FormData();

//删除key为name的值
formdata.delete("name");

 

例子：ajax提交表单上的数据，其实跟上传文件一样用ajax。

在C# ，可以用Request.Form[""]接收

string abc = Request.Form["abc"];

 

 

 

参考：

https://www.jianshu.com/p/e984c3619019