H5 FormData对象的作用及用法
方法一:利用 FormData
JS:
function uploadFileAndParam() {
var url = "http://localhost:42561/api/upload/UploadPost";
/*
FormData 对象就是模拟一个Form表单格式的数据,以二进制的方式提交,等同于 Form 表单 设置 enctype="multipart/form-data".
由于 ajax 请求默认 contentType:"application/x-www-form-urlencoded" (这也是 Form 表单 enctype 的默认值)
所以需要设置
contentType: false
processData: false
*/
var data = new FormData($("#myForm")[0]);//参数是JS对象,而 $("#myForm") 是JQ对象,并且是数组,所以需要加[0]
data.append("sex", 1);//追加数据
data.delete("name");//删除数据
var id = data.get("id");//获取数据
//还有 has(),getAll(),forEach() 等方法. $.ajax({
url: url,
data: data,
type: "post",
cache: false,//不缓存,暂时不明白为什么 FormData 对象提交,都要设置这个
contentType: false,//告诉JQ, 不要设置 ContentType 请求头
processData: false,//告诉JQ, 不要处理发送的数据
success: function () { }
});
}
HTML:
<div>
<span>测试同时Post参数及文件</span><br />
<form action="http://localhost:42561/api/upload/UploadPost" method="post" id="myForm">
<input type="text" name="id" value="11" />
<input type="text" name="name" value="中1&1文" />
<input type="text" name="age" value="22" />
<input type="file" name="myFile" />
<input type="submit" value="submit提交" />
<input type="button" value="button提交" onclick="uploadFileAndParam()" />
</form>
</div>
方法二:原生Form表单提交
<form id="myForm6" enctype="multipart/form-data" method="post" action="http://*****">
<input type="text" name="id" value="35" />
<input type="text" name="name" value="wjire" />
<input type="file" name="myFile" />
<input type="submit" value="submit提交" />
</form>
后台 Web Api 接收
public async Task<HttpResponseMessage> UploadPost() {
var request = HttpContext.Current.Request;
var id = request.Form["id"];
var name = request.Form["name"];
var age = request.Form["age"];
var files = HttpContext.Current.Request.Files;
var path = HttpContext.Current.Server.MapPath("/img/");
if (files.Count > ) {
foreach (string file in files) {
var img = files[file];
if (img?.ContentLength > ) {
var fileName = img.FileName;
await Task.Run(() => img.SaveAs(path + fileName));
}
}
return new HttpResponseMessage(HttpStatusCode.OK)
{
Content = new StringContent("成功@!!!!!")
};
} else {
var stream = request.InputStream;
if (stream.Length > ) {
var bytes = new byte[stream.Length];
stream.Read(bytes, , bytes.Length);
}
}
return Request.CreateErrorResponse(HttpStatusCode.BadRequest, "没有文件");
}
H5 FormData对象的作用及用法的更多相关文章
- new FormData() - FormData对象的作用及用法
一.概述 FormData 对象的使用: 1.用一些键值对来模拟一系列表单控件:即把form中所有表单元素的name与value组装成 一个queryString 2. 异步上传二进制文件. 二.使用 ...
- JSP九大内置对象的作用和用法总结?
JSP九大内置对象的作用和用法总结? 1.request对象javax.servlet.http.HttpServletRequest request对象代表了客户端的请求信息,主要用于接受通过HTT ...
- JSP九大内置对象的作用和用法总结【转】
JSP九大内置对象的作用和用法总结? JSP中一共预先定义了9个这样的对象,分别为:request.response.session.application.out.pagecontext.c ...
- H5 FormData对象的使用
XMLHttpRequest Level2 添加了一个新的接口--FormData .[ 主要用于发送表单数据,但也可以独立使用于传输键控数据.与普通的Ajax相比,它能异步上传二进制文件 ] 利用F ...
- JSP九大内置对象的作用和用法总结(转)
SP中一共预先定义了9个这样的对象,分别为:request.response.session.application.out.pagecontext.config.page.exception 1.r ...
- JSP九大内置对象的作用和用法总结(转发)
jsp九大内置对象: 内置对象/作用域(每一种作用域的生命周期是不一样的): 1, application 全局作用域 2, session 会话作用域 3, request 请求作用域 4, pag ...
- H5 FormData对象的使用——进行Ajax请求并上传文件
XMLHttpRequest Level2 添加了一个新的接口——FormData .[ 主要用于发送表单数据,但也可以独立使用于传输键控数据.与普通的Ajax相比,它能异步上传二进制文件 ] 利用F ...
- H5 FormData对象
FormData对象 2018年01月08日 14:31:53 阅读数:2635 FormData对象,可以把所有表单元素的name与value组成一个queryString,提交到后台. 在使用aj ...
- 使用H5 formData对象上传图片和视频的文件时,必填的属性
async : false,cache : false,contentType : false,// 告诉jQuery不要去设置Content-Type请求头processData : false,/ ...
随机推荐
- 关系型数据库工作原理-数据库整体框架(翻译自Coding-Geek文章)
本文翻译自Coding-Geek文章:< How does a relational database work>.原文链接:http://coding-geek.com/how-data ...
- mysql测试
数据库效率测试: 1.创建索引: 数据量小(或者空表)的情况下创建索引: 有一定数据量情况下(100000条数据)创建索引: 在有一定数据量的情况下,数据库会为现有数据添加索引,此时,创建索引的工作量 ...
- 《Linux命令行与shell脚本编程大全》- 读书笔记2 - 更多的bash shell命令
更多的bash shell命令 想检测进程,需要熟悉ps命令的用法.ps命令好比工具中的瑞士军刀,它能输出运行在系统上的所有程序的许多信息.默认情况下,ps命令只会显示运行在当前控制台下的属于当前用户 ...
- bat脚本:windows下一键启动zookeeper+kafka
bat脚本:windows下一键启动zookeeper+kafka 把下面两行代码存为bat文件,双击执行即可.注意更改相应的目录 这里用ping来控制时间(先zookeeper,ping 4 次后 ...
- [模拟赛] T2 混合图
Description Hzwer神犇最近又征服了一个国家,然后接下来却也遇见了一个难题. Hzwer的国家有n个点,m条边,而作为国王,他十分喜欢游览自己的国家.他一般 会从任意一个点出发,随便找边 ...
- Bitmap的加载与缓存
Android系统中图片一般用Bitmap对象表示,它支持png,jpg等常见格式.通常情况下图片的体积都比较大,单个应用允许使用的内存又是有限的,所以我们需要采取一些手段减少内存占用并提高加载速度. ...
- [mysql] MySQL解压缩安装步骤
以前装的MySQL出问题了,只好卸载了. 又下载了一个mysql-5.6.24-win32.1432006610.zip.msi文件直接安装就行了.这里需要解压到指定目录,配置后可使用. 环境变量配置 ...
- [poj3468]A Simple Problem with Integers_线段树
A Simple Problem with Integers 题目大意:给出n个数,区间加.查询区间和. 注释:1<=n,q<=100,000.(q为操作次数). 想法:嗯...学了这么长 ...
- RDD概念、特性、缓存策略与容错
一.RDD概念与特性 1. RDD的概念 RDD(Resilient Distributed Dataset),是指弹性分布式数据集.数据集:Spark中的编程是基于RDD的,将原始数据加载到内存变成 ...
- 2018上C语言程序设计(高级)作业- 初步计划
C语言程序设计(高级)36学时,每周4学时,共9周.主要学习指针.结构和文件三部分内容.整个课程作业计划如下: PTA和博客的使用指南 若第一次使用PTA和博客,请务必先把PTA的使用简介和教师如何在 ...