您的位置:

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]);
    }
}