c#+js 使用formdata上传文件
如果不是使用form表单submit的形式,我们可以手动通过formdata传值(针对文件上传等)
比如:
<html>
<head>
<meta name="viewport" content="width=device-width" />
<link href="~/jquery-easyui-master/themes/default/easyui.css" rel="stylesheet" />
<link href="~/jquery-easyui-master/themes/icon.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/jquery-easyui-master/jquery.easyui.min.js"></script>
<title>Test</title>
</head> <body>
<input id="my" name="my" class="easyui-filebox" width="300"/>
@*<input name="my" type="file" width="300"/>*@
<button onclick="submitV();">提交</button>
<script>
function submitV() {
var dom = $('input[name="my"]')[0];//获取上传文件dom对象
var forms = $('<form></form>').append($(dom).clone());//复制dom对象,创建表单
var formData = new FormData(forms[0]);
/*
由于easyui生成的dom有各种嵌套,直接通过id获取的dom不是一个type为file的input
这里可以通过设置name属性,通过name获取
formdata对象可以附加各种表单值,文件对象也是可以的
formData.append("myValue", 'myValue');
formData.append("my", $('input[name="my"]')[0].files[0]); 还有一种方式就是通过form表单的dom去实例化foamdata,比如:
var formData = new FormData($('<form><input name="my" value="myvalue"/></form>')[0]);
*/ $.ajax({
url: '@Url.Action("TestPost")',
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,// 告诉jQuery不要去设置Content-Type请求头
processData: false// 告诉jQuery不要去处理发送的数据
});
}
</script>
</body>
</html>
其中,ajax参数说明:
| 参数名 | 类型 | 描述 |
| url | String | (默认: 当前页地址) 发送请求的地址。 |
| type | String | (默认: "GET") 请求方式 ("POST" 或 "GET"), 默认为 "GET"。注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。 |
| timeout | Number | 设置请求超时时间(毫秒)。此设置将覆盖全局设置。 |
| async | Boolean | (默认: true) 默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。 |
| beforeSend | Function | 发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。
function (XMLHttpRequest) {
|
| cache | Boolean | (默认: true) jQuery 1.2 新功能,设置为 false 将不会从浏览器缓存中加载请求信息。 |
| complete | Function | 请求完成后回调函数 (请求成功或失败时均调用)。参数: XMLHttpRequest 对象,成功信息字符串。
function (XMLHttpRequest, textStatus) {
|
| contentType | String |
(默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。告诉服务器从浏览器提交过来的数据格式。 例如:我们提交数据时假如使用了 JSON2.js 中方法 JSON.stringify(obj) 格式化为json字符串后,再默认提交就会报错。这个时候就需要指定提交的内容格式为:"application/json"。 |
| data | Object, String |
发送到服务器的数据。 若data数据类型为JavaScript对象或数 组,Jquery在提交之前自动调用JQuery.param()方法把要发送的数据编码成为"application/x-www-form- urlencoded"格式的数据(即 name=value&name1=value1);JavaScript对象必须为 Key/Value 格式;如果为数组,jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'; 若data数据类型为String类型,则直接默认该数据已经按照"application/x-www-form-urlencoded"格式编码完成,不再转换。 processData选项可以控制是否进行转换。该选项默认为true。 |
| dataType | String |
预期服务器返回的数据类型。设定HttpHeader中“Accept”域的内容,告诉服务器浏览器可以想要返回的数据格式类型,同时JQuery也会根据该类型对返回的数据进行处理。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText,并作为回调函数参数传递,可用值: "xml": 返回 XML 文档,可用 jQuery 处理。 "html": 返回纯文本 HTML 信息;包含 script 元素。 "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。 "json": 返回 JSON 数据 。JQuery将返回的字符串格式数据自动转化为Javascript对象,便于直接使用obj.property格式访问。若没有指定该选项,即使返回的是JSON格式的字符串,JQuery也不会自动转换。 "jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。 |
| error | Function | (默认: 自动判断 (xml 或 html)) 请求失败时将调用此方法。这个方法有三个参数:XMLHttpRequest 对象,错误信息,(可能)捕获的错误对象。
function (XMLHttpRequest, textStatus, errorThrown) {
|
| global | Boolean | (默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件,如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件 |
| ifModified | Boolean | (默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。 |
| processData | Boolean | (默认: true) 默认情况下,发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false。 |
| success | Function | 请求成功后回调函数。这个方法有两个参数:服务器返回数据,返回状态
function (data, textStatus) {
|
c#+js 使用formdata上传文件的更多相关文章
- js通过formData上传文件,Spring后台处理
1.前端 var formData = new FormData(); formData.append('file', $("#file").val()); $.ajax({ ur ...
- 使用FormData上传文件、图片
关于FormData XMLHttpRequest Level 2添加了一个新的接口 ---- FormData 利用FormData对象,可以通过js用一些键值对来模拟一系列表单控件,可以使用XM ...
- FormData上传文件 带进度条
* jQuery ajax FormData 上传文件 template $.ajax({ url: url, type: 'POST', data: new FormData(form), dat ...
- js实现分段上传文件
使用js实现分段上传文件,本文使用了FileReader对象,可参考:https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader 1)获取文 ...
- (十)HttpClient以multipart/form-data上传文件
原文链接:https://blog.csdn.net/wsdtq123/article/details/78888734 POST上传文件 最早的HTTP POST是不支持文件上传的,给编程开发带来很 ...
- Nodejs学习笔记(八)--- Node.js + Express 实现上传文件功能(felixge/node-formidable)
目录 前言 formidable简介 创建项目并安装formidable 实现上传功能 运行结果 部分疑惑解析 写在之后 前言 前面讲了一个构建网站的示例,这次在此基础上再说说web的常规功能---- ...
- FormData上传文件(input file)
<div> <input type="file" name="FileUpload" id="FileUpload" va ...
- JS 异步分段上传文件
为了解决大文件上传 (PHP上传最大限制2GB) 同时为了解决文件上传是对服务器造成的压力 可以通过分段上传解决这个问题,这得益于HTML5开发的file API 前台代码: 引用了进度条插件myPr ...
- Nodejs学习笔记(八)—Node.js + Express 实现上传文件功能(felixge/node-formidable)
前言 前面讲了一个构建网站的示例,这次在此基础上再说说web的常规功能----文件上传,示例以一个上传图片的功能为例子 上传功能命名用formidable实现,示例很简单! PS:最近比较忙,距上一次 ...
随机推荐
- oh my god 四则运算
Week1地址:https://git.coding.net/leiqh549/four.git 需求分析: 1.一个生成n道四则运算的程序,要求数字在0-100间,运算符在3-5个之间且运算符至少包 ...
- Unity控件ScrollView使用问题记录
Unity版本:5.6.2 控件Scroll View由4部分组成,如图: 1.含有Scroll Rect组件的根节点:Scroll View 2.含有Mask组件的节点:Viewport 3.所有内 ...
- angularJS1笔记-(14)-自定义指令(scope)
index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- 关闭Centos5.5的写磁盘I/O功能
一个Linux文件默认有3个时间. atime:对此文件的访问时间. ctime:此文件inode发生变化的时间. mtime:此文件的修改时间. 如果有多个小文件(比如Web服务器的页面上有多个小图 ...
- selenium之数据驱动框架应用WPS个人中心自动签到
wps在注册后,有个每日签到的功能,签到后有几率送wps的专属金币[稻米],为了免费获得,又不想每天都是人工去执行签到动作,所以用selenium写了个小脚本,准备用数据驱动框架来完成这个事情,数据驱 ...
- TCP&UDP基础
TCP TCP/IP是一种网络通讯协议,而socket则是TCP/IP网络最为通用的API,即一种应用程序接口,称为套接字.TCP是面向连接的协议,在进行数据收发前必须连接,且在收发时必须保持该连接. ...
- 清理elasticsearch的索引
curl -XDELETE 'http://172.16.1.16:9200/logstash-2013.03.*' 清理掉了所有 3月份的索引文件,其中*是通配符 下面是主页上的详细介绍,其他部分可 ...
- bzoj1036 [ZJOI2008]树的统计Count(树链剖分)
Description 一棵树上有n个节点,编号分别为1到n,每个节点都有一个权值w.我们将以下面的形式来要求你对这棵树完成一些操作: I. CHANGE u t : 把结点u的权值改为t II. Q ...
- Nginx+Tomcat搭建高性能负载均衡集群--Windows本地测试版
链接:http://www.cnblogs.com/wbyp/p/6860744.html
- JVM工作原理 - 内存空间
大多数 JVM 将内存区域划分为 Method Area(Non-Heap)(方法区) ,Heap(堆) , Program Counter Register(程序计数器) , VM Stack( ...