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

随机推荐

B. Modulo Sum dp
https://codeforces.com/contest/577/problem/B 先读懂题意,substring 这个是子串说明不可以跳 subsequence这个是子序列可以跳这个题目是一 ...
Java 函数式接口
目录 Java 函数式接口 1. 函数式接口 1.1 概念 1.2 格式 1.3 函数式接口的使用 2. 函数式编程 2.1 Lambda的延迟执行性能浪费的日志案例使用Lambda表达式的优化 ...
leetCode刷题 | 两数之和
两数之和: 给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那两个整数,并返回他们的数组下标. 你可以假设每种输入只会对应一个答案.但是,你不能重复利用这个数 ...
【Hadoop离线基础总结】Hue的简单介绍和安装部署
目录 Hue的简单介绍概述核心功能安装部署下载Hue的压缩包并上传到linux解压编译安装启动启动Hue进程 hue与其他框架的集成 Hue与Hadoop集成 Hue与Hive集成 Hue ...
STM32F767ZI NUCLEO144 基于CubeIDE快速开发入门指南
刚入手的NUCLEO-F767ZI:整合官网资源,理清思路,便于快速进行快发: 文章目录 1 NUCLEO 系列 2 NUCLEO-F767ZI 3 环境搭建 3.1 Keil/IAR安装 3.2 C ...
IDEA打包JavaWeb项目
IDEA打包JavaWeb项目步骤: 1.配置项目->2.Build Artifacts->3.找到.war文件具体操作: 首先,单击顶部工具栏的“File”选项,在弹出选项中选择“P ...
力扣题解-面试题58 - II. 左旋转字符串
题目描述字符串的左旋转操作是把字符串前面的若干个字符转移到字符串的尾部.请定义一个函数实现字符串左旋转操作的功能. 比如,输入字符串"abcdefg"和数字2,该函数将返回左旋转 ...
R的安装以及包安装
今天看论文,需要用到R语言的库,于是又折腾了半天.. 其实并没有什么太大的问题,只是在第三方包的下载方面还有python中使用R方面遇到了问题: 第三方包的导入其实在网上有 ...
mysqldump 参数--single-transaction
其实很简单,single-transaction可以让mysqldump 的时候不锁表.但是他有3个前提 innodb的引擎不能在执行的同时,有其他alter table ,drop table,r ...
「雕爷学编程」Arduino动手做（38）——joystick双轴摇杆模块
37款传感器与模块的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止37种的.鉴于本人手头积累了一些传感器和模块,依照实践出真知(一定要动手做)的理念,以学习和交流为目的,这里 ...

WebAPI之FormData

FormData API

创建formdata对象

使用formdata上传文件

使用jQuery上传formdata数据

WebAPI之FormData的更多相关文章

随机推荐

热门专题