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

随机推荐

测试开发专题:spring-boot自定义异常返回
上文测试开发专题:spring-boot统一异常捕获我们讨论了java异常以及如何使用Spring-Boot捕获异常,但是没有去说捕获异常后该如何进一步处理,这篇文章我们将对这个遗留的问题进行讨论. ...
浅析Spring中bean的作用域
一.前言刚刚花了点时间,阅读了一下Spring官方文档中,关于bean的作用域这一块的内容.Spring-4.3.21官方文档中,共介绍了七种bean作用域,这篇博客就来简单介绍一下这七种作用域 ...
[hdu3644 A Chocolate Manufacturer's Problem]模拟退火，简单多边形内最大圆
题意:判断简单多边形内是否可以放一个半径为R的圆思路:如果这个多边形是正多边形,令r(x,y)为圆心在(x,y)处多边形内最大圆的半径,不难发现,f(x,y)越靠近正多边形的中心,r越大,所以可以利 ...
[hdu5204]水题
思路:插入的数按指数级增长,所以范围内最多存在logR个数.并且最近i次插入的数,首位置为2^(i-1),且每隔2^i出现一次,于是暴力之..可以用插入排序维护,也可查询时再排下序. 一: #prag ...
小心了！Kubernetes自动化操作工具将让你失去工作
运行Kubernetes的人已经花费太多时间在操作上,企业正在考虑为Kubernetes编写自动化工具. 尽管IT部门的大部分职位都会增加,但职业顾问说,计算机操作员预计会减少.这个角色涉及运行She ...
ASA failover配置(A/S)
环境描述 1. 两条公网出口,分别为移动,联通 2. 两台ASA做主备配置,实现出口故障转移 3. 内网两台核心做堆叠配置(由于模拟器无法实现堆叠,此处使用HSRP) 需求描述 1. 当一条公网链路故 ...
ReactNative报错：Can't find variable: __fbBatchedBridge
最近开始研究ReactNative,首先根据网上教程 http://www.codeceo.com/article/windows-react-native-android.html 一步一步来.完成 ...
使用plupload实现多文件上传，自定义参数
下载地址:点击打开链接 1.在开发中可能需要用户附件上传的功能,实现批量上传功能其实就将多个上传任务放到一个集合中,分别上传. 2,使用plupload js插件可以很轻松的实现带参数的多文件上传 3 ...
iOS中的系统目录（Documents、tmp、Library）、RunLoop的一些知识点
学习内容欢迎关注我的iOS学习总结--每天学一点iOS:https://github.com/practiceqian/one-day-one-iOS-summary 实现轮播图需要注意的地方需要 ...
.net core BundlerMinifier.BundlerBuildTask 任务意外失败
BundlerMinifier.BundlerBuildTask : 捆绑和缩小CSS.JS和HTML文件 BundlerMinifier.BundlerBuildTask 任务意外失败处理: 1.在 ...

WebAPI之FormData

FormData API

创建formdata对象

使用formdata上传文件

使用jQuery上传formdata数据

WebAPI之FormData的更多相关文章

随机推荐

热门专题