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