JS上传文件file（formdata）

最新推荐文章于 2025-06-30 20:21:25 发布

Eighteen Z

最新推荐文章于 2025-06-30 20:21:25 发布

阅读量1.8w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： file 上传 js formdata

本文为博主原创文章，未经博主允许不得转载！转载请注明出处。

本文链接：https://blog.csdn.net/lunhui1994_/article/details/84841350

javascript 专栏收录该内容

39 篇文章

订阅专栏

本文介绍了一种使用formData和XMLHttpRequest实现数据库文件上传的方法，适用于从外部或本地导入数据库文件的场景。通过示例代码展示了如何将文件或文件内容作为请求的一部分发送，包括使用JavaScript的Blob对象处理文件内容。

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

最近有项目要开发一个数据库模块，需要实现可以在外部导入数据库文件，也可以从本地导入数据库文件。其实就是本地文件的一个上传功能，在这里总结一下：

首先我使用的方法是通过创建formData对象，使用XMLHttpRequest来发送数据。
代码如下：

var fileObj = document.getElementById('sql_input').files[0];
var form = new FormData();
form.append('file', fileObj);
if(window.XMLHttpRequest){
                    var xhr = new XMLHttpRequest();
                }else{
                    var xhr = new ActiveXObject('Microsoft.XMLHTTP');
                }
                xhr.open('POST',"www.xxx.com");
                xhr.send(form);
                xhr.onreadystatechange = function() {
                    if (xhr.readyState == 4){
                        var res = JSON.parse(xhr.response);
                            console.log("上传成功");
                    }
                };

通过这种方式其实就是通过form表单的方式提交我们的文件，并不是单纯的通过ajax来提交。但是是最简单直接的方法。
3. 当你拥有的并不是文件，而是文件的内容，但想通过文件的方式发送那么我们可以这么做：

var content = '<a id="a"><b id="b">hey!</b></a>'; // 新文件的正文...
var blob = new Blob([content], { type: "text/xml"});

form.append("webmasterfile", blob);

这是 JavaScript的file-like对象，这个属于JavaScript和本地文件相关的内容，大家有兴趣可以了解一下，但是要注意兼容性