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

随机推荐

SQL语言概况（4.1）
SQL语言概况(4.1) 目录 SQL语言概况(4.1) 4.1 SQL语言概况 4.1.1 历史及标准简介 4.1.2 SQL语言定义及特点 4.1.3 使用说明参考资料: 数据库原理及设计(第3 ...
02_互联网基本原理和HTML入门
上节课的知识复习互联网的原理:服务器.浏览器.HTTP.知道网页文件是真实的物理存在,用HTTP请求这个文件. 要知道网址的含义:http://www.iqianduan.cn/aaa 请求哪个文件 ...
CF#633C Spy Syndrome 2 DP+二分+hash
Spy Syndrome 2 题意现在对某个英文句子,进行加密: 把所有的字母变成小写字母把所有的单词反过来去掉单词之间的空格比如:Kira is childish and he hates ...
HDU 2004 （水）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2004 题目大意: 给你成绩让你根据成绩打分解题思路: 简单的if...else 应用需要注意是,if ...
Nuget一键打包上传以及高级应用
Nuget是什么不用多说,大家应该也没少用过Nuget, 不少人也应该使用过工具打Nuget包,接下来先一步步说明如何使用脚本完成Nuget一键打包 Nuget一键打包配置Nuget环境下载地址: ...
DVWA-反射型XSS
0x01 XSS介绍 XSS,全称Cross Site Scripting,即跨站脚本攻击,某种意义上也是一种注入攻击,是指攻击者在页面中注入恶意的脚本代码,当受害者访问该页面时,恶意代码会在其浏览器 ...
Crash-fix-2:org.springframework.http.converter.HttpMessageNotReadableException
最近开始对APP上的Crash进行对应,发现有好多常见的问题,同一个问题在多个APP都类似的出现了,这里记录下这些常见的错误. crash Log: org.springframework.http. ...
springmvc 文件上传异步处理
springmvc3提供了文件上传异步处理功能,当文件上传时,controller不需要一直等到文件上传成功后再返回视图,而是先返回到servlet容器,待异步处理的线程完成后转向指定视图! 首先要在 ...
.Net Core3.0 WebApi 项目框架搭建五: 轻量型ORM+异步泛型仓储
.Net Core3.0 WebApi 项目框架搭建:目录 SqlSugar介绍 SqlSugar是国人开发者开发的一款基于.NET的ORM框架,是可以运行在.NET 4.+ & .NET C ...
elasticsearch 小总结
elasticsearch 小总结 0. 起因距离初次写关于es的文章 https://blog.csdn.net/aca_jingru/article/details/44488703 已经过去4 ...

WebAPI之FormData

FormData API

创建formdata对象

使用formdata上传文件

使用jQuery上传formdata数据

WebAPI之FormData的更多相关文章

随机推荐

热门专题