使用jquery提交FormData数据
https://blog.csdn.net/u011500781/article/details/54931716
http://yunzhu.iteye.com/blog/2177923
***********************************************
<!doctype html>
<html>
<head>
<title>测试</title>
<meta charset="utf8">
<script src="../js/jquery-1.11.3.min.js"></script>
</head>
<body>
<form id="form">
<input name="file" type="file" />
<input name="a" value="1" />
<input value="2" />
</form>
<button>提交</button>
</body>
</html>
<script>
$(function() {
// 监听上传进度
var xhrOnProgress = function(fun) {
xhrOnProgress.onprogress = fun; //绑定监听
return function() {
//通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
var xhr = $.ajaxSettings.xhr();
//判断监听函数是否为函数
if (typeof xhrOnProgress.onprogress !== 'function')
return xhr;
//如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
if (xhrOnProgress.onprogress && xhr.upload) {
xhr.upload.onprogress = xhrOnProgress.onprogress;
}
return xhr;
}
} $('button').on('click', function() {
var formData = new FormData($('#form')[0]);// 自动搜索表单信息(表单内没有name属性的input不会被搜索到),IE<=9不支持FormData
formData.append('b', 3);// 还可以添加额外的表单数据 $.ajax({
type: 'post',
url: '../../../material/jQueryFileUpload?type=1',
data: formData,
contentType: false,// 当有文件要上传时,此项是必须的,否则后台无法识别文件流的起始位置(详见:#1)
processData: false,// 是否序列化data属性,默认true(注意:false时type必须是post,详见:#2)
xhr: xhrOnProgress(function(e){// (详见:#3)
var percent=e.loaded / e.total;//计算百分比
$('body').append('->'+ percent);
}),
success: function(data) {
$('body').append('完成');
}
})
})
})
</script>
使用jquery提交FormData数据的更多相关文章
- jQuery提交Json数据到Webservice,并接收返回的Json数据
jQuery ajax webservice:get 和 post 一.GET 方式 客户端 复制代码 代码如下: var data = { classCode: "0001"}; ...
- 基于Ajax提交formdata数据、错误信息展示和局部钩子、全局钩子的校验。
formdata重点: 实例化FormData这个类 循环serializeArray可以节省代码量 图片要用$('#id')[0].files[0]来获得 加上contentType:false和p ...
- angularjs和jquery前端发送以http请求formdata数据
formdata是比较常见的前端发送给后端的请求,不仅可以上传数据,而且同时可以上传文件. jquery使用http请求上传formdata数据的方法: var formdata = new Form ...
- Jquery Ajax 提交json数据
在MVC控制器(这里是TestController)下有一个CreateOrder的Action方法 [HttpPost] public ActionResult CreateOrder(List&l ...
- 从零开始实现multipart/form-data数据提交
在HTTP服务应用中进行数据提交一般都使用application/json,application/x-www-form-urlencoded和multipart/form-data这几种内容格式.这 ...
- jquery ajax 提交 FormData
$('form').submit(function(){ var formdata=new FormData(this); $.ajax({ type:'POST', url:'/url/path', ...
- jquery提交form表单插件jquery.form.js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 跨域WebApi的Jquery EasyUI的数据交互
目录 1 大概思路... 1 2 创建WebAPI 1 3 创建CrossMainController并编写... 1 4 Nuget安装microso ...
- post提交的数据几种编码格式
1.背景介绍 HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS.GET.HEAD.POST.PUT.DELETE.TRACE.CONNECT 这几种.其中 POST 一般用来向服务端 ...
随机推荐
- Git的图形化工具使用教程
虽然感觉并没有什么暖用,但姑且还是写出来留作纪念好了 Git这种分布式版本控制系统最适合的就是单枪匹马搞开发的选手,不需要服务器,下载个git和图形工具,网速快十分钟就能搞定开始愉快的开发工作.我在搭 ...
- C# 用timer做成服务后 timer_Tick () 为什么不执行?
不能使用 窗体的 Timer,他只能在窗体中使用,服务中无法使用请使用 System.Timers.Timer类 protected override void OnStart(string[] ar ...
- AI 高等数学、概率论基础
一.概论 基础引入: 原理一:[两边夹定理] 原理二:[极限] X为角度x对应的圆弧的点长: 原理三[单调性]: 引入: 二.导数 常见函数的导数: 四.应用: 求解: 泰勒展式和麦克劳林展式: 泰勒 ...
- mysql常用查询语句
一.查询指定schema下表的个数 select count(TABLE_NAME) from information_schema.tables where table_schema="d ...
- [AaronYang原创] 敏捷开发-Jira 6.0.5环境搭建[2]
基本配置-关卡一(我研究了1.5个小时 AaronYang) JIRA的设置向导将只显示您安装后第一次JIRA. 一旦你完成了它,你不能再次运行它. 然而,每一个设置在设置向导配置可以通过管理控制 ...
- 面向对象的Shell脚本
还记得以前那个用算素数的正则表达式吗?编程这个世界太有趣了,总是能看到一些即别出心裁的东西.你有没有想过在写Shell脚本的时候可以把你的变量和函数放到一个类中?不要以为这不可能,这不,我在网上又看到 ...
- 如何调试makefile变量
六.七年前写过一篇<跟我一起写Makefile>,直到今天,还有一些朋友问我一些Makefile的问题,老实说,我有一段时间没有用Makefile了,生疏了.回顾,这几年来大家问题我的问题 ...
- tableView的用法具体解释
1 tableView的类型 1.1 UITableViewStylePlain 没有区头 不显区头 向上滑动区头不会移动到屏幕外面 ' 1.2 UITableViewStyleGrou ...
- C#操作Sqlite快速入门及相关工具收集
Sqlite不需要安装即可使用.Sqlite是不是那个System.Data.SQLite.DLL临时创建了数据库引擎? 1.新建一个WinForm项目,引用System.Data.SQLite.DL ...
- Vue Ssr之旅 —— Nuxt
Nuxt 官方网站:https://nuxtjs.org/ 官方脚手架工具 Create-nuxt-app: https://github.com/nuxt-community/create-nuxt ...