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