WebAPI之FormData

FormData API

构造函数：FormData
FormData.prototype.append()
FormData.prototype.get()
FormData.prototype.getAll()
FormData.prototype.set()
FormData.prototype.has()
FormData.prototype.delete()
FormData.prototype.entries()
FormData.prototype.keys()
FormData.prototype.values()

创建formdata对象

从零开始创建

var icon_file = document.getElementById('my_icon');

var fd = new FormData();

// 添加一些数据

fd.append('en_name', 'Pelli');

fd.append('cn_name', '沛笠');

fd.append('age', 18);

fd.append('bug', 'new Error()');

// 添加我的头像文件

// fd.append('my_icon', icon_file.files[0]);

// 获取中文名

var en_name = fd.get('en_name');// "Pelli"

// 获取英文名

var cn_name = fd.get('cn_name');// "沛笠"

// 获取年龄

var age = fd.get('age');// "18"

// 重新设置年龄, 越变越年轻

fd.set('age', 16);

fd.get('age');// "16"

// 新增一个英文名:Jack,我的Rose在哪里？

fd.append('en_name', 'Jack');

// 获取所有的英文名

fd.getAll('en_name');// ["Pelli", "Jack"]

// 把bug删除掉

fd.delete('bug');

// 获取所有的key

var fd_keys = fd.keys();

// 获取所有的value

var fd_vals = fd.values();

// 获取所有的键值

var fd_keys_vals = fd.entries();

// 遍历keys

for(var key of fd_keys){

    console.log(key);

}

// 遍历values

for(var val of fd_vals){

    console.log(val);

}

// 遍历所有的键值

for(var keyval of fd_keys_vals){

    console.log(keyval[0], keyval[1]);

}

使用表单创建formdata数据

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Formdata</title>

</head>

<body>

    <form enctype="multipart/form-data" method="post" name="fileinfo">

        <label>邮箱地址:</label>

        <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br />

        <label>说明:</label>

        <input type="text" name="filelabel" size="12" maxlength="32" /><br />

        <label>附件:</label>

        <input type="file" name="file" required />

        <input type="submit" value="提交!" />

    </form>

    <script type="text/javascript">

        var formElement = document.querySelector("form");

        var f_data = new FormData(formElement);

        // 新增一些自定义数据

        f_data.append('my_name', 'Pelli');

        var f_ents = f_data.entries();

        // 遍历数据

        for(for ents of f_ents){

            console.log(ents[0], ents[1]);

        }

    </script>

</body>

</html>

使用formdata上传文件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Formdata</title>

</head>

<body>

    <form enctype="multipart/form-data" method="post" name="fileinfo">

        <label>邮箱地址:</label>

        <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br />

        <label>说明:</label>

        <input type="text" name="filelabel" size="12" maxlength="32" /><br />

        <label>附件:</label>

        <input type="file" name="file" required />

        <input type="submit" value="提交!" />

    </form>

    <script type="text/javascript">

        var form = document.forms.namedItem("fileinfo");

        form.addEventListener('submit', function(ev) {

            var oOutput = document.querySelector("div"),

                oData = new FormData(form);

            oData.append("custom", "自定义数据");

            // 发起ajax

            var oReq = new XMLHttpRequest();

            // 在跨域的时候，如果用到了cookie或者session，需要设置该参数

            // 服务器端也需要设置相应的：Access-Control-Allow-Credentials: true

            oReq.withCredentials = true;

            oReq.open("POST", "stash.php", true);

            oReq.onload = function(oEvent) {

                if (oReq.status == 200) {

                    oOutput.innerHTML = "上传成功！";

                } else {

                    oOutput.innerHTML = "Error " + oReq.status + " occurred when trying to upload your file.<br \/>";

                }

            };

            oReq.send(oData);

            // 劫持form的默认事件，使用ajax发送数据

            ev.preventDefault();

        }, false);

    </script>

</body>

</html>

使用jQuery上传formdata数据

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Formdata</title>

</head>

<body>

    <form enctype="multipart/form-data" method="post" name="fileinfo">

        <label>邮箱地址:</label>

        <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br />

        <label>说明:</label>

        <input type="text" name="filelabel" size="12" maxlength="32" /><br />

        <label>附件:</label>

        <input type="file" name="file" required />

        <input type="submit" value="提交!" />

    </form>

    <script type="text/javascript">

        var fd = new FormData(document.querySelector("form"));

        fd.append("CustomField", "This is some extra data");

        // 也可添加blob数据

        // fd.append("myfile", myBlob, "filename.txt");

        $.ajax({

            url: "stash.php",

            type: "POST",

            data: fd,

            processData: false,  // 不处理数据

            contentType: false,   // 不设置内容类型

            xhrFields: {// 如果有跨域，并且需要使用session时，需要加上该参数

                withCredentials: true

            },

            success: function(data){

                // 成功的回调函数

            },

            error: function(data){

                // 出错的回调函数

            }

        });

    </script>

</body>

</html>

微信公众号:撩码

WebAPI之FormData的更多相关文章

编码为multipart/form-data自定义类型（包括文件）如何自动绑定到webapi的action的参数里
application/x-www-form-urlencoded与 multipart/form-data: Fom表单中如果没有type=file的控件,用默认的application/x-www ...
WebAPI通过multipart/form-data方式同时上传文件以及数据（含HttpClient上传Demo）
简单的Demo,用于了解WebAPI如何同时接收文件及数据,同时提供HttpClient模拟如何同时上传文件和数据的Demo,下面是HttpClient上传的Demo界面 1.HttpClient部分 ...
WebApi FormData+文件长传异步+同步实现
// POST api/values public async Task Post() { try { // 检查该请求是否含有multipart/form-data if (!Request.Con ...
WebApi实现Ajax模拟Multipart/form-data方式多文件上传
前端页面代码: <input type="file" class="file_control" /><br /> <input t ...
WebApi系列~StringContent与FormUrlEncodedContent
回到目录知识点本文是一个很另类的文章,在项目中用的比较少,但如果项目中真的出现了这种情况,我们也需要知道如何去解决,对于知识点StringContent和FormUrlEncodedContent ...
ASP.NET WebAPi（selfhost）之文件同步或异步上传
前言前面我们讲过利用AngularJs上传到WebAPi中进行处理,同时我们在MVC系列中讲过文件上传,本文结合MVC+WebAPi来进行文件的同步或者异步上传,顺便回顾下css和js,MVC作为客 ...
如何使 WebAPI 自动生成漂亮又实用在线API文档
1.前言 1.1 SwaggerUI SwaggerUI 是一个简单的Restful API 测试和文档工具.简单.漂亮.易用(官方demo).通过读取JSON 配置显示API. 项目本身仅仅也只依赖 ...
Enable Cross-Origin Requests in Asp.Net WebApi 2[Reprint]
Browser security prevents a web page from making AJAX requests to another domain. This restriction i ...
webApi上传下载文件
上传文件通过webApi html端调用时包含(form提交包含 enctype="multipart/form-data",才可以启作用获取到文件) public class U ...

随机推荐

D. Beautiful Array DP
https://codeforces.com/contest/1155/problem/D 这个题目还是不会写,挺难的,最后还是lj大佬教我的. 这个题目就是要分成三段来考虑, 第一段就是不进行乘,就 ...
xml(2)
DTD用来验证xml的形式引入格式:<!DOCTYPE 根元素的名字 SYSTEM "路径">//其中system代表本地路径 <?xml version=&q ...
JDBC10 Blob二进制对象
//将图片输入到数据库中 // String sql="insert into t_user2 (username,headImg) values (?,?)"; // ps=co ...
Java设计模式之建造者模式（Builder Pattern）
前言这篇文章主要向大家讲解什么是建造者模式,建造者模式的实例讲解及应用场景等知识点. 一.建造者介绍用户可以不知道产品的构建细节直接可以创建复杂的对象,主要是分离了产品的构建和装配,这样就实现 ...
HBase 安装snappy压缩软件以及相关编码配置
HBase 安装snappy压缩软件以及相关编码配置前言在使用HBase过程中因为数据存储冗余.备份数等相关问题占用过多的磁盘空间,以及在入库过程中为了增加吞吐量所以会采用相关的压缩算法来压缩 ...
css3 文字处理
text-overflow:ellipsis;超出的文字显示...前提是该盒子必须有overflow:hidden;属性 text-shadow 文字阴影 direction:控制文字方向,值有dow ...
深入Spring之IOC之加载BeanDefinition
本文主要分析 spring 中 BeanDefinition 的加载,对于其解析我们在后面的文章中专门分析. BeanDefinition 是属于 Spring Bean 模块的,它是对 spring ...
Unity3D的UGUI布局锚点自动绑定关系
[MenuItem("CONTEXT/RectTransform/Auto")] public static void AutoRectAnior() { Debug.Log(&q ...
POJ3693 Maximum repetition substring 后缀数组
POJ - 3693 Maximum repetition substring 题意输入一个串,求重复次数最多的连续重复字串,如果有次数相同的,则输出字典序最小的 Sample input ccab ...
binlog在并发状态下的记录
前两天看binlog发现个奇怪的地方:对于position靠后的记录,timestamp却比之前的记录还要小.当时觉得大概和并发有关系后来做了个实验开两个session 对于session1: b ...

WebAPI之FormData

FormData API

创建formdata对象

使用formdata上传文件

使用jQuery上传formdata数据

WebAPI之FormData的更多相关文章

随机推荐

热门专题