码迷,mamicode.com
首页 > Web开发 > 详细

【.NET】HTML5 新特性 - FromData

时间:2020-03-13 01:22:18      阅读:66      评论:0      收藏:0      [点我收藏+]

标签:用途   一个   span   ssd   ajax   广告   app   text   str   

 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

【.NET】HTML5 新特性 - FromData

标签:用途   一个   span   ssd   ajax   广告   app   text   str   

原文地址:https://www.cnblogs.com/laokchen/p/12483985.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!