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的更多相关文章

  1. c#+js 使用formdata上传文件

    如果不是使用form表单submit的形式,我们可以手动通过formdata传值(针对文件上传等) 比如: <html> <head> <meta name=" ...

  2. 使用JS的FormData对象

    利用FormData对象,你可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 创建一个FormData对象 你可以先创建一个空的F ...

  3. Node.js 专题

    前提电脑中已经安装过NodeJS, npm.现在需要进行升级操作.1.查看当前的npm和NodeJs的版本: C:\Users\Administrator>node -v v4.4.3 C:\U ...

  4. js通过formData上传文件,Spring后台处理

    1.前端 var formData = new FormData(); formData.append('file', $("#file").val()); $.ajax({ ur ...

  5. js中formData的使用

    FormData 对象的使用 https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects http ...

  6. js中FormData+XMLHttpRequest数据传输

    前言: 首先我们需要了解,前后端进行数据传输依赖于浏览器的XMLHttpRequest对象 一.什么是XMLHttpRequest对象? XMLHttpRequest 是DOM对象,提供了对于http ...

  7. 前端程序员难翻身,没有好的学习方法,你永远无法成功,vue.js专题

    学习vue正确思路,是先学vue-cli,再学vue.js单文件引用的用法,这样会在极短时间内撤底撑握vue, 如果先学vue.js单文件用法,再去学vue-cli4,可以说是重新学vue,,,,难处 ...

  8. 【干货分享】Node.js 中文学习资料和教程导航

    这篇文章来自 Github 上的一位开发者收集整理的 Node.js 中文学习资料和教程导航.Node 是一个服务器端 JavaScript 解释器,它将改变服务器应该如何工作的概念,它的目标是帮助程 ...

  9. node.js中文资料导航 Mark

    Node.js HomePage Infoq深入浅出Node.js系列(进阶必读) Node.js中文文档 被误解的 Node.js Node.js C++ addon编写实战系列 热门node.js ...

随机推荐

  1. Node.js NPM Package.json

    章节 Node.js NPM 介绍 Node.js NPM 作用 Node.js NPM 包(Package) Node.js NPM 管理包 Node.js NPM Package.json Nod ...

  2. springboot 自定义错误jsp页面

    1.总览 2.application.properties spring.mvc.view.prefix=/WEB-INF/pages/ spring.mvc.view.suffix=.jsp#关闭w ...

  3. POJ 1039:Pipe 计算几何

    Pipe Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 9773   Accepted: 2984 Description ...

  4. MFC 实现CTreeCtrl单选

    void CDepartmenManager::SetUncheck(HTREEITEM hTree) { if (!hTree){ return; } m_DePartmentView.SetChe ...

  5. tensorflow--保存加载模型

    s=mnist.train.next_batch(batch_size)print(xs.shape)print(ys.shape) # #从集合中取全部变量# tf.get_collection() ...

  6. zookeeper 安装及集群

    一.zookeeper介绍 zookeeper是一个中间件,为分布式系统提供协调服务,可以为大数据服务,也可以为java服务. 分布式系统,很多计算机组成一个整体,作为一个整体一致对外并处理同一请求, ...

  7. Ubuntu 安装VirtualBox 虚拟机

    转载 1.终端命令 编辑sources.list ? 1 sudo gedit /etc/apt/sources.list 2.添加 软件源 将下面的地址加入sources.list 的末尾,保存并退 ...

  8. 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 ...

  9. odoo 日志文件太大处理,logfile自动轮替

    可以在conf 文件中设置配置信息: logfile = /your/logfile/path/ logrotate = True ; 设置为True 即可自动更换旧的日志文件, 参考: https: ...

  10. Arduino LiquidCrystal库函数中文对照

    我之所以会试试看LCD+Shield,一是因为我本来就有这块板,但一直不会用,第二个原因则是Arduino+Cookbook这本书.O’Reilly的这本手册对你在Arduino实践中的各种问题(几乎 ...