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.直接找到表单放到FormData中

 $("#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.初始化后，一个一个添加到FormData中

 $("#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" > 的值[只可以拿到第一个图片]。

$('#file')[0].files  //拿到多文件。

这里设置值的时候如果写成这样

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方式

✨文件添加事件获取文件✨ 

$("#fileId").on('change', function (e) {  //文件控件的改变监听事件
　　var fileList = e.currentTarget.files;     //获取所有的文件

　　$.each(fileList, function (index, item) {
　　　　　　var name = item.name;//名称
          var sizeKb = (item.size /1024).toFixed(2)//文件大小默认b,除以1024就是kb， toFixed(2)保留两位小数  
　　})

})