不依赖form表单的文件上传的原生JS实现

最新推荐文章于 2022-05-22 19:38:38 发布

小新JS 

最新推荐文章于 2022-05-22 19:38:38 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript form表单文章标签：原生上传文件

本文链接：https://blog.youkuaiyun.com/weixin_42198583/article/details/103633266

form表单同时被 2 个专栏收录

3 篇文章

订阅专栏

JavaScript

2 篇文章

订阅专栏

本文介绍了一种不依赖于HTML表单的文件上传方法，通过创建FormData对象并使用XMLHttpRequest进行POST请求，实现文件的服务器上传。文章详细展示了如何将文件添加到FormData中，并发送请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var url='api/upload'   //上传文件的服务器地址。
    file="...",  //你已经获取到的文件,如下截图说明。
    form_data=new FormData(),  //创建FormData对象，这就是不依赖form表单的关键。
    http_req=new XMLHttpRequest();  //创建请求对象。

http_req.onload = function(){  //上传成功的操作。
    console.log(this.responseText);
};
form_data.append('file',file);  //将文件加入到FormData对象，字段名"fiel"自行决定。
http_req.open("post", url);  
http_req.send(form_data);  //上传文件，将请求发送到服务器。

通常使用上传文件的插件来获取文件；

一般获取到的文件就是下面截图的那样，只要红框内的值就行了

file文件内容长这样