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>

主要是通過(guò)formData封裝我們要傳遞的參數(shù)，然后使用ajax傳遞到后端。

這里有兩中方式

1.直接找到表單放到FormData中

$("#btn").click(function(){
 　　var form = document.getElementById("coords");//獲取到form表單$("coords")[0] 這樣也可以
　　 var formData = new FormData(form);//創(chuàng)建一個(gè)formData對(duì)象,將表單中的數(shù)據(jù)放進(jìn)去，有一個(gè)問(wèn)題，就是普通參數(shù)可以放進(jìn)去，在后端也可以拿到，文件也可以拿到，昨天測(cè)試了
　　　　

　　　　　　　　$.ajax({//ajax
                    url: "/upload/uploadHeaderPic",//文件上傳路徑
                    type: "POST",
                    processData : false,//不處理數(shù)據(jù),必須為false
                    contentType : false,//不設(shè)置內(nèi)容類(lèi)型,必須為false
                    data: formData,//這個(gè)就是我們封裝的參數(shù)的一個(gè)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調(diào)用出現(xiàn)錯(cuò)誤")
                    }
　　　　　　　　});

 }

2.初始化后，一個(gè)一個(gè)添加到FormData中

 $("#btn").click(function(){
    　　　　//這里是只創(chuàng)建對(duì)象，不把整個(gè)表單放進(jìn)去，而是一個(gè)一個(gè)的放進(jìn)去
            var formData = new FormData();//創(chuàng)建一個(gè)formData對(duì)象

　　　　　　　　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,//不處理數(shù)據(jù),必須為false
                    contentType : false,//不設(shè)置內(nèi)容類(lèi)型,必須為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調(diào)用出現(xiàn)錯(cuò)誤")
                    }
                    
                });

})

上邊都是普通文本參數(shù)的傳遞。下邊說(shuō)下圖片的傳遞。

formData.append('img0', $('#file')[0].files[0]);

圖片的傳遞也是拿到圖片的值，然后設(shè)置參數(shù)傳遞。
但是需要注意的一點(diǎn)就是如何拿到圖片的值。

$('#file')[0].files[0] //這個(gè)取值就可以拿到　<input id="file" type="file" > 的值[只可以拿到第一個(gè)圖片]。

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

這里設(shè)置值的時(shí)候如果寫(xiě)成這樣

formData.append('img0', $('#file')[0].files);我是用的是jfinal測(cè)試的，所以，這里是拿不到值的。具體原因未知。

如果多個(gè)值可以循環(huán)遍歷

for(var i=0; i<$('#file')[0].files.length;i++){//使用for循環(huán)將選擇的文件一個(gè)一個(gè)添加(append)到formData對(duì)象中
　　formData.append('img0', $('#file')[0].files[i]);//注意:如果你使用的是jfinal框架這里的key(img)必須是不同的,如果相同的話(huà)文件能上傳但是拿上傳文件名的時(shí)候只能拿到一個(gè)
}

這種循環(huán)遍歷的方式也是可以拿到值的。

后臺(tái)取值的時(shí)候jfinal的方式getFiles("head"); “head”這個(gè)可以不寫(xiě)，這個(gè)是一個(gè)設(shè)置上傳路徑。getFiles()就可以拿到全部的值。

普通取值的話(huà)，直接getPara("xx");就可以

圖片的傳遞方式和上邊的普通傳遞參數(shù)方式一樣都是使用一樣的ajax方式

✨文件添加事件獲取文件✨

$("#fileId").on('change', function (e) {  //文件控件的改變監(jiān)聽(tīng)事件
　　var fileList = e.currentTarget.files;     //獲取所有的文件

　　$.each(fileList, function (index, item) {
　　　　　　var name = item.name;//名稱(chēng)
          var sizeKb = (item.size /1024).toFixed(2)//文件大小默認(rèn)b,除以1024就是kb， toFixed(2)保留兩位小數(shù)  
　　})

})

總結(jié)

以上是生活随笔為你收集整理的FormData的使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。