FormData对象提交数据和文件

最新推荐文章于 2023-01-13 15:16:38 发布

进击的飞牛

最新推荐文章于 2023-01-13 15:16:38 发布

阅读量979

点赞数 1

分类专栏：前端知识大杂烩 # 前后台数据传递文章标签： javascript

本文链接：https://blog.youkuaiyun.com/qq_41816742/article/details/120555515

版权

前端知识大杂烩同时被 2 个专栏收录

11 篇文章

订阅专栏

前后台数据传递

2 篇文章

订阅专栏

这篇博客介绍了如何使用HTML表单和FormData对象进行文件及参数的异步上传。通过设置`enctype=multipart/form-data`，可以处理二进制数据。FormData提供了append方法添加键值对，支持多次添加同一键而不覆盖。使用XMLHttpRequest或jQuery的ajax方法，配合设置`processData`和`contentType`为false，实现文件的后台提交。

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

当前台需要提交文件和其他参数的时候，可以使用表单的action属性，不过要添加属性 enctype="multipart/form-data"，还可以使用FormData对象提交，FormData接口提供了一种表示表单数据的键值对 key/value 的构造方式，利用 FormData 对象，我们可以通过 JavaScript 用一些键值对来模拟一系列表单控件，与普通的 Ajax 相比，使用 FormData 的最大优点就是我们可以异步上传二进制文件和其他数据

//列出创建formData实例对象的几种方式
//001 通过构造函数创建不传递任务参数
FormData formData = new FormData();   //空的实例对象

//002 获取表单标签传递给FormData构造函数
var formData2 = new FormData(document.getElementById("formTest"))

FormData对象的方法

FormData.append()
向 FormData 中添加新的属性值，FormData 对应的属性值存在也不会覆盖原值，而是新增一个值，如果属性不存在则新增一项属性值。

FormData.delete()
从 FormData 对象里面删除一个键值对。

FormData.entries()
返回一个包含所有键值对的iterator对象。

FormData.get()
返回在 FormData 对象中与给定键关联的第一个值。

FormData.getAll()
返回一个包含 FormData 对象中与给定键关联的所有值的数组。

FormData.has()
返回一个布尔值表明 FormData 对象是否包含某些键。

FormData.keys()
返回一个包含所有键的iterator对象。

FormData.set()
给 FormData 设置属性值，如果FormData 对应的属性值存在则覆盖原值，否则新增一项属性值。

FormData.values()
返回一个包含所有值的iterator对象。

首先需要有一个form表单

<form enctype="multipart/form-data" method="post" name="fileinfo">
  <label>Your email address:</label>
  <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br />
  <label>Custom file label:</label>
  <input type="text" name="filelabel" size="12" maxlength="32" /><br />
  <label>File to stash:</label>
  <input type="file" name="file" id="file" required />
</form>

// 创建一个FormData对象
var oData = new FormData(document.forms.namedItem("fileinfo"));

// 加入需要加其他的参数，可以调用append（）方法
obData.append("age","10")
// 再次加入文件
obData.append("fileName",$("#file")[0].files[0]);

// 之后调用后台，使用XMLHttpRequest
var xhr=new XMLHttpRequest();
    xhr.open("post","http://127.0.0.1/adv");
    xhr.send(formdata);
    xhr.onload=function(){
        if(xhr.status==200){
            //...
        }
    }
// 使用ajax
$.ajax({
	type : "post",
	url : "url",
	data : obData,
	processData:false,   //  告诉jquery不要处理发送的数据
    contentType:false,   // 告诉jquery不要设置content-Type请求头
	success : function(data){
	    if (data=="error") {
			alert("文件提交失败!");
		}else{
			$("input[name='userUrl']").val(data);
			alert("文件上传成功!");
		}}
    });