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,/ ...
随机推荐
- ADS协议变量配置界面
ADS协议是倍福产品的通信协议,在双击ADS协议图标后打开如下图的配置窗口. 变量配置表中各列的含义: 报警类型: 脚本: 当设置了报类型时,在运行时如果变量值引发报警时将执行一次脚本.例如 大于报警 ...
- webuploader 上传文件 生成链接下载文件
最近 在asp.net MVC 项目 需要实现一个Excel和 图片上传功能.之前有使用过SWFUpload 做过上传图片功能,在本次实现过程中,有人推荐WebUploader 上传组件,因此采用we ...
- Win7硬盘的AHCI模式
1.什么是硬盘的AHCI模式? AHCI是串行ATA高级主控接口的英文缩写,它是Intel所主导的一项技术,它允许存储驱动程序启用高级SATA功能,如本机命令队列(NCQ)和热插拔.开启AHCI之后可 ...
- 解决新版的vue-cli后无法通过ip访问vue项目
今天遇到个问题,之前一直没遇到过,通过vue-cli脚手架搭建的项目,只能通过localhost访问,不能通过IP地址访问. 这是由 webpack 导致的,2017年11月12日的时候 webpac ...
- unix命令
最近需要用到一些Unix的东西 ,就学习了下这个东西,简单记录下命令,方便以后查询! 1. ls这是最基本的档案指令. ls 的意义为 "list",也就是将某一个目录或是某一个档 ...
- go语言的数组和切片区别
这里不介绍数组和切片的使用技巧,主要看下2者的区别. 首先看下它们的定义: 数组:类型 [n]T 表示拥有 n 个 T 类型的值的数组. 切片:类型 []T 表示一个元素类型为 T 的切片. 看一个数 ...
- MySQL 中如何存储 emoji ?
MySQL 中如何存储 emoji ? 问题还原 使用 erlang 存储一些特殊字符串到 MySQL 的时候,却没法读出来.经检查,这些字符串的二进制格式如下: <<240,159,15 ...
- ACCESS_ONCE
宏定义: #define ACCESS_ONCE(x) (*(volatile typeof(x) *)&(x)) 分解: typeof(x):取x的类型,如果x是int,那typeof(x) ...
- Java 英文面试题
1. Q: What is HashMap and Map?A: Map is Interface and Hashmap is class that implements that. 2. Q: D ...
- linux --> 计算机是如何启动的?
计算机是如何启动的? 零.boot的含义 "启动"用英语怎么说?回答是boot.boot原来的意思是靴子,"启动"与靴子有什么关系呢? 原来,这里的boot是b ...