FormData

  FormData对象用以将数据编译成键值对,以便用XMLHttpRequest来发送数据。其主要用于发送表单数据,但亦可用于发送带键数据(keyed data),而独立于表单使用。如果表单enctype属性设为multipart/form-data ,则会使用表单的submit()方法来发送数据,从而,发送数据具有同样形式。

创建 FormData 对象

  调用 append() 方法添加字段

var formData = new FormData();

formData.append("username", "Groucho");
formData.append("accountnum", 123456); //数字123456会被立即转换成字符串 "123456"
  formData.append('file', file, file.name)

FormData 与 Object 的区分

  都是 Object 的成员,可以理解为二者的格式不同。

  formData是一种数据格式,和JSON类似。不过 js 的 Object中目前还不包含 JSON 这种格式。

常见的 Content-Type 类型

  http协议是以ASCII码传输,建立在TCP/IP协议之上的应用层规范;

  该规范把HTTP请求分为三个部分:状态行、请求头、消息主体。

  在使用post进行请求的时候,数据发送出去,只有当浏览器解析成功才具有意义。

  对于一般的服务器语言,例如php、python等都内置了自动解析常见数据格式的功能;而服务器是根据请求头 headers 中的 content-type

  (1)application/x-www-form-urlencode

         浏览器的原生form表单,如果不设置 enctype 属性,最终将会以application/x-www-form-urlencode方式提交数据;像jquery、Qwrap的ajax,content-type默认值都是 application/x-www-form-urlencode

  (2)multipart/form-data

    利用表单长传文件的时候,必须让 form 的 enctyped 等于这个值;这个格式一般是用来上传文件的,各大服务端语言对他也有着良好的支持

  常见的媒体格式类型如下:

  • text/html : HTML格式
  • text/plain :纯文本格式
  • text/xml :  XML格式
  • image/gif :gif图片格式
  • image/jpeg :jpg图片格式
  • image/png:png图片格式

以application开头的媒体格式类型:

  • application/xhtml+xml :XHTML格式
  • application/xml     : XML数据格式
  • application/atom+xml  :Atom XML聚合格式
  • application/json    : JSON数据格式
  • application/pdf       :pdf格式
  • application/msword  : Word文档格式
  • application/octet-stream : 二进制流数据(如常见的文件下载)
  • application/x-www-form-urlencoded : <form encType=””>中默认的encType,form表单数据被编码为key/value格式发送到服务器(表单默认的提交数据的格式)

formData 对象 与 Content-Type 类型的更多相关文章

  1. org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'application/json;charset=UTF-8' not supported或其他Content type不支持处理

    很久没从头到尾搭框架,今天搭的过程中,springmvc controller方法入参用@RequestBody自动绑定参数时一直提示各种 not supported 排查问题有两个解决路径: 1)使 ...

  2. the request doesn't contain a multipart/form-data or multipart/form-data stream, content type header

    the request doesn't contain a multipart/form-data or multipart/form-data stream, content type header ...

  3. org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'multipart/form-data;boundary=----WebKitFormBoundaryRAYPKeHKTYSNdzc1;charset=UTF-8' not supported

    原文:https://www.cnblogs.com/yueli/p/7552888.html 最近同事在做一个图片上传功能.在入参 body 中同时传入文件和其它基本信息结果出现如题异常.在此记录下 ...

  4. Input对象的type类型

    Input表示Form表单中的一种输入对象,其又随Type类型的不同而分文本输入框,密码输入框,单选/复选框,提交/重置按钮等,下面一一介绍. 1,type=text        输入类型是text ...

  5. .NET获取文件的MIME类型(Content Type)

    第一种:这种获取MIME类型(Content Type)的方法需要在.NET 4.5之后才能够支持,但是非常简单. 优点:方便快捷 缺点:只能在.NET 4.5之后使用 public FileResu ...

  6. 【转载】C#使用typeof运算符获取对象变量的具体类型Type

    在C#的实际类型操作过程中,有时候需要通过typeof方法获取对象的类型对应的Type变量即具体类型,例如在获取DataTable中某一列的具体数据类型的时候,我们就会用到typeof方法来获取具体的 ...

  7. 使用HTML5 FormData对象实现大文件分块上传(断点上传)功能

    FormData是HTML5新增的一个对象,通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对.它可以更灵活方便的发送表单数据,因为可以独立于表单使用.如果你把表单 ...

  8. FormData 对象上传二进制文件

    使用jQuery 利用 FormData 上传文件:http://harttle.com/2016/07/04/jquery-file-upload.html     通过FormData对象可以组装 ...

  9. FormData 对象的使用

    FormData 对象的使用 在本文章中 如何创建一个FormData对象 通过HTML表单创建FormData对象 使用FormData对象上传文件 通过AJAX提交表单和上传文件可以不使用Form ...

随机推荐

  1. DSP到底是个什么鬼?看完你就懂了

    DSP 即数字信号处理技术, DSP 芯片即指能够实现数字信号处理技术的芯片. DSP芯片是一种快速强大的微处理器,独特之处在于它能即时处理资料. DSP 芯片的内部采用程序和数据分开的哈佛结构,具有 ...

  2. 技术趋势:React vs Vue vs Angular

    React.Vue 和 Angular 这两年发展状况如何?2019 年哪个技术最值得学习? 前几天 Medium 上有一位作者发表了一篇关于 React.Vue 和 Angular 技术趋势的文章( ...

  3. appium框架之bootstrap

    (闲来无事,做做测试..)最近弄了弄appium,感觉挺有意思,就深入研究了下. 看小弟这篇文章之前,先了解一下appium的架构,对你理解有好处,推荐下面这篇文章:testerhome appium ...

  4. SVD分解 解齐次线性方程组

    SVD分解 只有非方阵才能进行奇异值分解 SVD分解:把矩阵分解为 特征向量矩阵+缩放矩阵+旋转矩阵 定义 设\(A∈R^{m×n}\),且$ rank(A) = r (r > 0) $,则矩阵 ...

  5. Redis单机配置多实例,实现主从同步

    版权声明:本文为博主原创文章,欢迎转载,转载请保留或注明出处 本文转自:http://www.cnblogs.com/lgeng/p/6623336.html 一,单机多实例:Redis官网: htt ...

  6. 一、Redis-NoSQL数据库

    转载:[https://blog.csdn.net/aaronthon/article/details/81714528 ] [https://www.cnblogs.com/StanleyBlogs ...

  7. 神经网路-SGD-1

    SGD神经网络以及python中实现 1.SGD(stochastic gradient descend):<1>数据抽取:<2>计算梯度;<3>参数更新:< ...

  8. elasticsearch系列七:ES Java客户端-Elasticsearch Java client(ES Client 简介、Java REST Client、Java Client、Spring Data Elasticsearch)

    一.ES Client 简介 1. ES是一个服务,采用C/S结构 2. 回顾 ES的架构 3. ES支持的客户端连接方式 3.1 REST API ,端口 9200 这种连接方式对应于架构图中的RE ...

  9. Linux 学习 (四) 帮助命令

    Linux达人养成计划 I 学习笔记 man 命令 获取指定命令的帮助 man的级别 1:查看命令的帮助 2:查看可被内核调用的函数的帮助 3:查看函数和函数库的帮助 4:查看特殊文件的帮助(主要是/ ...

  10. VMware下安装linux虚拟机

    安装VMware [下一步] [下一步] 点击[自定义],[下一步] 更改安装目录,[下一步] [下一步] [下一步] [跳过] [完成] 点击桌面图标 如下勾选,输入邮箱,[继续] [完成] 安装l ...