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