同时上传参数及图片到 Web Api
方法一:利用 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, "没有文件");
}
同时上传参数及图片到 Web Api的更多相关文章
- web service上传参数代码实例
web service上传参数代码实例 这次做的项目用到webservice比较多,最开始在网上看的参考dome,发现都不行,后来发现安卓4.0以后有很大的不同,在做传参时,有些东西需要注意: 第一, ...
- 解决Web Uploader上传文件和图片 延迟和not defined
1.出现list not define时,var $list = $("#fileList"); 2.选择文件框有延迟,可能是因为选择文件类型过多 mimeTypes: 'imag ...
- android选择图片或拍照图片上传到服务器(包括上传参数)
From:http://blog.csdn.net/springsky_/article/details/8213898具体上传代码: 1.选择图片和上传界面,包括上传完成和异常的回调监听 [java ...
- dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.
http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术 ...
- 使用FormData上传文件、图片
关于FormData XMLHttpRequest Level 2添加了一个新的接口 ---- FormData 利用FormData对象,可以通过js用一些键值对来模拟一系列表单控件,可以使用XM ...
- Struts2图片文件上传,判断图片格式和图片大小
1. 配置Struts2能够上传的最大文件大小 使用Struts2进行文件上传的时候,Struts2默认文件大小最大为2MB,如果要传大一点的文件,就需要修改struts.xml配置文件,重新设置能够 ...
- MVC使用JCrop上传、裁剪图片
JCrop用来裁剪图片,本篇想体验的是: 在视图页上传图片: 上传成功,跳转到另外一个编辑视图页,使用JCrop对该图片裁剪,并保存图片到指定文件夹: 裁剪成功后,在主视图页显示裁剪图片: 当然,实际 ...
- 异步上传&预览图片-不压缩图片
本例使用ajaxFileUpload异步上传预览图片 <bean id="multipartResolver" class="org.springframework ...
- html5 图片上传,支持图片预览、压缩、及进度显示,兼容IE6+及标准浏览器
以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上 ...
随机推荐
- 去除文件夹中的.svn
一.在Dos窗口中运行如下命令 for/r <你项目的路径> %i in (.svn) do rd /s /q %i 二.将“Delete SVN Folders”操作添加到右击菜单中 建 ...
- python实现单链表的反转
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 #!/usr/bin/env python #coding = utf-8 ...
- SSH非交互式密码授权远程执行脚本
公司有上百台服务器,需要为每台服务器都执行一个脚本,因为所有服务器的账号密码都是一样的,所以可以不用搭建ansible等自动化运维工具,我们直接通过SSH远程执行即可完成. 本文以三台服务器为例,系统 ...
- corosync.conf
##totem定义集群内各节点间是如何通信的,totem本是一种协议,专用于corosync专用于各节点间的协议,协议是有版本的 totem { ##版本号 version: ##安全认证on|off ...
- zedboard zynq 学习 sobel 边缘检测 IP核 制作 根据 文档 Xapp890
官方文档http://www.xilinx.com/support/documentation/application_notes/xapp890-zynq-sobel-vivado-hls.pdf ...
- UVALive 5027 二分图 EK
C - Card Game Crawling in process...Crawling failedTime Limit:3000MS Memory Limit:0KB 64bit IO ...
- 华为手机怎么安装Google
华为手机怎么安装google 新买了个华为荣耀九,结果安装Google Play提示gms core 步骤一 gms 安装器.应用市场已经下架了 地址:链接: 点击打开链接 密码: m63j 步骤二 ...
- c# json 反序列化 泛型List 2行代码
List<EncyTable> list = new List<EncyTable>(); var jsonReqeust = "[{ENCY_ID:775,ENCY ...
- GYM - 101147 J.Whistle's New Car
题意: 给出一颗有点权和边权的树.求每一个点u的子树中有多少点v,使得点v到点u的距离小于等于点v的权值. 题解: 对于每一个点,倍增的预处理出他的祖宗节点及距离.根据预处理的结果求出每个点能到的最远 ...
- POJ 2142 The balance | EXGCD
题目: 求ax+by=c的一组解,使得abs(x)+abs(y)尽量小,满足前面前提下abs(ax)+abs(by)尽量小 题解: exgcd之后,分别求出让x尽量小和y尽量小的解,取min即可 #i ...