JS中使用FormData上传文件、图片的方法

作者：纸飞机时间：2026-10-30 11:50:34浏览：486

本文介绍如何利用JavaScript中的FormData接口实现文件和图片的异步上传。通过XMLHttpRequest Level 2新增的FormData对象，开发者可以模拟表单控件，以键值对形式构建查询字符串，从而避免手动拼接queryString。文章详细讲解了创建FormData对象、追加数据以及结合AJAX进行二进制文件上传的具体代码示例与配置参数。

FormData接口简介

FormData概述

XMLHttpRequest Level 2引入了FormData接口

借助FormData，JS可模拟表单控件键值对，支持通过XMLHttpRequest的send()方法异步上传二进制文件，相比普通ajax优势显著

FormData对象详解

该对象能将表单元素的name与value组合成queryString提交至后台，在ajax场景中可减少手动拼接queryString的工作量

queryString即查询字符串，由url中问号后的参数指定

当form以GET方式提交且含不安全字符时，浏览器先将其转为16进制（如空格转%20），Web Server存入QUERY_STRING环境变量，Request.QueryString方法从中取值并还原16进制字符利用FormData上传文件与图片

FormData对象的基本用法

实例化一个空的FormData对象，随后调用append方法添加键值对


var formdata=new FormData();
 formdata.append ("name" , "张三");

若已存在Form表单，获取该form对象并将其作为参数传入FormData构造函数


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title></title>
</head>
<body>
  <form name="form1" id="form1">
    <input id="file" type="file" name="name"></input>
  </form>
  <script type="text/javascript">
     var form=document.getElementById("form1");
     var formdata=new FormData(form);
  </script>
</body>
</html>

可在已有表单数据基础上，继续追加新的键值对


var formdata=new FormData();
 formdata.append ("age" , "21");

使用FormData上传文件

使用FormData对象实现文件上传


var formdata=new FormData($("#form1").[0]);//获取文件法一
//var formdata=new FormData( ); 
//formdata.append("file" , $("#file")[0].files[0]);//获取文件法二
       $.ajax({
           type : 'post',
           url : '#',
           data : formdata,
           cache : false,
           processData : false, // 不处理发送的数据，因为data值是Formdata对象，不需要对数据做处理
           contentType : false, // 不设置Content-type请求头
           success : function(){}
           error : function(){ }
       })

上述为JS中使用FormData上传文件、图片方法的完整介绍，旨在提供帮助，如有疑义欢迎留言！

作者最新文章

JS动态构建复杂嵌套JSON对象的方法

2026-11-05 15:41:52

JS负数取余为什么是负数？详解余数与模运算区别

2026-11-05 13:34:41

JS 解压出现乱码或报错怎么解决？

2026-11-05 12:32:38

JS 中 startsWith、indexOf 与正则判断字符串前缀的对比

2026-11-04 22:19:43

JS解析Excel后怎么将数据转换为JSON格式

2026-11-04 20:58:28