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 ...

随机推荐

【FPGA篇章三】FPGA常用语句：Verilog基本语法要素
欢迎大家关注我的微信公众账号,支持程序媛写出更多优秀的文章 Verilog中总共有十九种数据类型,我们先介绍四个最基本的数据类型,他们是: reg型.wire型.integer型.parameter型 ...
QtCreator中使用链接库
说明之前讨论的DLL的静态链接和动态连接都是基于 MSVC 编译器,但是 MinGW 似乎有另外一套类似但是不相同的机制.下文均在 windows 下使用 Qt Creator 中使用 MinGW ...
实现简单网页rtmp直播：nginx+ckplayer+linux
一.安装nginx 安装带有rtmp模块的nginx服务器(其它支持rtmp协议的流媒体服务器像easydarwin.srs等+Apache等web服务器也可以),此处使用nginx服务器,简单方便. ...
瞬间教你学会使用java中list的retainAll方法
retainAll方法简介当我们有两个list集合的时候,我们可以使用retainAll方法求得两个list集合的子集.retainAll是Collection接口中提供的一个方法,各个实现类有自己 ...
Vue.js-Vue的初体验
我是参考https://www.cnblogs.com/kidney/p/6052935.html 这位大神的最开始接触vue的时候,是他的input框输入的文字和旁边的span展示的文字同步,当时 ...
SSL协议握手工作流程详解(双向HTTPS流程)
参考学习文档:http://www.cnblogs.com/jifeng/archive/2010/11/30/1891779.html SSL协议的工作流程: 服务器认证阶段: 1)客户端向服务器发 ...
Atcoder Beginner Contest 166
VP赛况如下: 前言:感觉这一场题目难度还是比较贴近新生的,我一个codeforces小蓝名一小时居然AK了,F题数据有点水(?)暴力dfs居然都能过... A:A?C 题意:给你字符串,如果字符串是 ...
python--字典基本操作
字典格式 key :value # string list dict# 1.取数据方便# 2.速度快, 定义一个空字典: d = dict() 或者 d = { } infos = {'n ...
Wfuzz使用学习
工具用了不总结,使用命令很容易生疏,今天就把笔记梳理总结一下. 0x01 简介 WFuzz是用于Python的Web应用程序安全性模糊工具和库.它基于一个简单的概念:它将给定有效负载的值替换对FUZZ ...
读懂操作系统(x64)之堆栈帧（过程调用）
前言上一节内容我们对在32位操作系统下堆栈帧进行了详细的分析,本节我们继续来看看在64位操作系统下对于过程调用在处理机制上是否会有所不同呢? 堆栈帧我们给出如下示例代码方便对照汇编代码看,和上一节 ...

WebAPI之FormData

FormData API

创建formdata对象

使用formdata上传文件

使用jQuery上传formdata数据

WebAPI之FormData的更多相关文章

随机推荐

热门专题