JS专题-FormData
var formData = new FormData();

<form id="coords" class="coords" onsubmit="return false;" action="">
<!-- 主要的控件 -->
<input id="file" type="file" >
<div class="inline-labels">
<label>X1 <input type="text" size="4" id="x1" name="x1" /></label> <label>Y1
<input type="text" size="4" id="y1" name="y1" />
</label> <label>X2 <input type="text" size="4" id="x2" name="x2" /></label>
<label>Y2 <input type="text" size="4" id="y2" name="y2" /></label> <label>W
<input type="text" size="4" id="w" name="w" />
</label> <label>H <input type="text" size="4" id="h" name="h" /></label>
</div>
</form>
<button id="btn">上传头像</button>

主要是通过formData封装我们要传递的参数,然后使用ajax传递到后端。
这里有两中方式
1.

$("#btn").click(function(){
var form = document.getElementById("coords");//获取到form表单$("coords")[0] 这样也可以
var formData = new FormData(form);//创建一个formData对象,将表单中的数据放进去,有一个问题,就是普通参数可以放进去,在后端也可以拿到,文件也可以拿到,昨天测试了

$.ajax({//ajax
url: "/upload/uploadHeaderPic",//文件上传路径
type: "POST",
processData : false,//不处理数据,必须为false
contentType : false,//不设置内容类型,必须为false
data: formData,//这个就是我们封装的参数的一个formData
dataType:"json",
success: function(data){
//layer.msg(data.msg)
alert(data.msg);
console.log("msg",data.msg)
},
error:function(e){
console.log("msg","ajax调用出现错误")
}
});

}

2.

$("#btn").click(function(){
//这里是只创建对象,不把整个表单放进去,而是一个一个的放进去
var formData = new FormData();//创建一个formData对象
var x1 = $('#x1').val(),
x2 = $('#x2').val(),
y1 = $('#y1').val(),
y2 = $('#y2').val();
formData.append('x11',x1 );
formData.append('y11',y1 );
formData.append('x22',x2 );
formData.append('y22',y2 );

$.ajax({//ajax
url: "/upload/uploadHeaderPic",
type: "POST",
processData : false,//不处理数据,必须为false
contentType : false,//不设置内容类型,必须为false
data: formData,
dataType:"json",
success: function(data){
//layer.msg(data.msg)
alert(data.msg);
console.log("msg",data.msg)
},
error:function(e){
console.log("msg","ajax调用出现错误")
} });

})

上边都是普通文本参数的传递。下边说下图片的传递。

formData.append('img0', $('#file')[0].files[0]); 图片的传递也是拿到图片的值,然后设置参数传递。
但是需要注意的一点就是如何拿到图片的值。
$('#file')[0].files[0] //这个取值就可以拿到 <input id="file" type="file" > 的值。这里都写的是数组,$ 对象取值的问题吧。需要研究!!! 这里设置值的时候如果写成这样
formData.append('img0', $('#file')[0].files);我是用的是jfinal测试的,所以,这里是拿不到值的。具体原因未知。 如果多个值可以循环遍历
for(var i=0; i<$('#file')[0].files.length;i++){//使用for循环将选择的文件一个一个添加(append)到formData对象中
formData.append('img0', $('#file')[0].files[i]);//注意:如果你使用的是jfinal框架这里的key(img)必须是不同的,如果相同的话文件能上传但是拿上传文件名的时候只能拿到一个
}
这种循环遍历的方式也是可以拿到值的。
后台取值的时候jfinal的方式 getFiles("head"); “head”这个可以不写,这个是一个设置上传路径。getFiles()就可以拿到全部的值。
普通取值的话,直接getPara("xx");就可以
图片的传递方式和上边的普通传递参数方式一样都是使用一样的ajax方式
JS专题-FormData的更多相关文章
- c#+js 使用formdata上传文件
如果不是使用form表单submit的形式,我们可以手动通过formdata传值(针对文件上传等) 比如: <html> <head> <meta name=" ...
- 使用JS的FormData对象
利用FormData对象,你可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 创建一个FormData对象 你可以先创建一个空的F ...
- Node.js 专题
前提电脑中已经安装过NodeJS, npm.现在需要进行升级操作.1.查看当前的npm和NodeJs的版本: C:\Users\Administrator>node -v v4.4.3 C:\U ...
- js通过formData上传文件,Spring后台处理
1.前端 var formData = new FormData(); formData.append('file', $("#file").val()); $.ajax({ ur ...
- js中formData的使用
FormData 对象的使用 https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects http ...
- js中FormData+XMLHttpRequest数据传输
前言: 首先我们需要了解,前后端进行数据传输依赖于浏览器的XMLHttpRequest对象 一.什么是XMLHttpRequest对象? XMLHttpRequest 是DOM对象,提供了对于http ...
- 前端程序员难翻身,没有好的学习方法,你永远无法成功,vue.js专题
学习vue正确思路,是先学vue-cli,再学vue.js单文件引用的用法,这样会在极短时间内撤底撑握vue, 如果先学vue.js单文件用法,再去学vue-cli4,可以说是重新学vue,,,,难处 ...
- 【干货分享】Node.js 中文学习资料和教程导航
这篇文章来自 Github 上的一位开发者收集整理的 Node.js 中文学习资料和教程导航.Node 是一个服务器端 JavaScript 解释器,它将改变服务器应该如何工作的概念,它的目标是帮助程 ...
- node.js中文资料导航 Mark
Node.js HomePage Infoq深入浅出Node.js系列(进阶必读) Node.js中文文档 被误解的 Node.js Node.js C++ addon编写实战系列 热门node.js ...
随机推荐
- Node.js NPM Package.json
章节 Node.js NPM 介绍 Node.js NPM 作用 Node.js NPM 包(Package) Node.js NPM 管理包 Node.js NPM Package.json Nod ...
- springboot 自定义错误jsp页面
1.总览 2.application.properties spring.mvc.view.prefix=/WEB-INF/pages/ spring.mvc.view.suffix=.jsp#关闭w ...
- POJ 1039:Pipe 计算几何
Pipe Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 9773 Accepted: 2984 Description ...
- MFC 实现CTreeCtrl单选
void CDepartmenManager::SetUncheck(HTREEITEM hTree) { if (!hTree){ return; } m_DePartmentView.SetChe ...
- tensorflow--保存加载模型
s=mnist.train.next_batch(batch_size)print(xs.shape)print(ys.shape) # #从集合中取全部变量# tf.get_collection() ...
- zookeeper 安装及集群
一.zookeeper介绍 zookeeper是一个中间件,为分布式系统提供协调服务,可以为大数据服务,也可以为java服务. 分布式系统,很多计算机组成一个整体,作为一个整体一致对外并处理同一请求, ...
- Ubuntu 安装VirtualBox 虚拟机
转载 1.终端命令 编辑sources.list ? 1 sudo gedit /etc/apt/sources.list 2.添加 软件源 将下面的地址加入sources.list 的末尾,保存并退 ...
- spark on yarn 安装笔记
yarn版本:hadoop2.7.0 spark版本:spark1.4.0 0.前期环境准备: jdk 1.8.0_45 hadoop2.7.0 Apache Maven 3.3.3 1.编译spar ...
- odoo 日志文件太大处理,logfile自动轮替
可以在conf 文件中设置配置信息: logfile = /your/logfile/path/ logrotate = True ; 设置为True 即可自动更换旧的日志文件, 参考: https: ...
- Arduino LiquidCrystal库函数中文对照
我之所以会试试看LCD+Shield,一是因为我本来就有这块板,但一直不会用,第二个原因则是Arduino+Cookbook这本书.O’Reilly的这本手册对你在Arduino实践中的各种问题(几乎 ...