formdata多文件上傳詳解

一、formdata多文件上傳有介面

使用formdata進行文件上傳，需要後端有對應的介面能夠接收文件，一般常用的後端語言如PHP、Java、Nodejs都有相關的支持。在前端需要知道後端介面的地址，以及介面向前端返回的需要處理的數據格式。

二、formdata文件上傳json

formdata上傳的數據，可以使用json格式的數據進行傳輸，而且在後端處理也比較簡單。下面是一個使用json格式上傳文件的示例代碼：

let formData = new FormData();
formData.append("file", file);
formData.append("data", JSON.stringify(data));

三、formdata文件上傳

使用formdata進行文件上傳，需要將選擇上傳的文件添加到formdata中，可以使用input標籤的文件選擇器進行文件選擇，也可以通過JS的方式把文件添加到formdata中。下面是一段JS代碼，通過input選擇器添加文件到formdata中：

let input = document.createElement("input");
input.type = "file";
input.onchange = function() {
    let file = input.files[0];
    let formData = new FormData();
    formData.append("file", file);
}

四、formdata文件後台接受

後端需要使用合適的方式來接受前端上傳的formdata數據，一般使用常用的後端語言，如PHP、Java、Nodejs都有相應的方法。下面是一個使用PHP接收formdata數據的示例代碼：

$file = $_FILES["file"];
$data = $_POST["data"];

五、formdata文件上傳最大限制

使用formdata進行文件上傳時，需要注意上傳文件的最大限制，根據不同的後端語言，需要做相應的配置，否則會出現文件上傳失敗或上傳的文件被截斷。下面是一個PHP設置上傳文件大小的示例代碼：

ini_set("upload_max_filesize", "20M");

六、formdata上傳圖片的原理

在使用formdata上傳圖片時，原理是把圖片文件轉成二進位格式的數據，然後把二進位數據存儲在formdata中上傳到伺服器，服務端再通過相應的方式將這些二進位數據還原為圖片文件。

七、前端formdata文件上傳

前端使用formdata進行文件上傳一般有兩種方式，一種是通過input標籤的文件選擇器添加文件到formdata中，另一種是通過JS的方式通過文件流的方式把文件添加到formdata中。下面是一個使用JS文件流方式上傳文件的示例代碼：

let file = new File(["hello world"], "hello.txt", {type: "text/plain"});
let formData = new FormData();
formData.append("file", file);

八、formdata上傳多個文件

formdata也支持上傳多個文件，只需要在添加文件到formdata的時候，把文件添加到formdata的相應的key中。下面是一個上傳多個文件的示例代碼：

let input = document.createElement("input");
input.type = "file";
input.multiple = true;
input.onchange = function() {
    let files = input.files;
    let formData = new FormData();
    for(let i=0; i<files.length; i++) {
        formData.append("file"+i, files[i]);
    }
}