js formdata ie
FormData 是 JavaScript 中的一个接口，它可以让你轻松地构建一组键值对，表示表单字段和它们的值，然后可以使用 XMLHttpRequest 或 Fetch API 发送这些数据。FormData 对象在处理 HTML 表单数据时非常有用，尤其是在需要通过 AJAX 提交表单时。
基础概念
FormData 对象主要用于序列化表单数据，它可以自动处理文件上传，并且可以与 XMLHttpRequest 或 Fetch API 很好地集成。
优势
- 自动序列化：FormData 可以自动将表单数据序列化为键值对。
- 文件上传：支持文件上传，可以直接通过 FormData 对象添加文件。
- 兼容性：与现代浏览器兼容良好，但在 Internet Explorer (IE) 浏览器中的支持有限。
类型
FormData 主要有以下几种使用方式：
- 创建空的 FormData 对象：
let formData = new FormData(); - 从现有的 form 元素创建 FormData 对象：
let formData = new FormData(document.getElementById('myForm'));
应用场景
- AJAX 表单提交：通过 AJAX 方式提交表单数据，无需刷新页面。
- 文件上传：在客户端处理文件上传，提供更好的用户体验。
在 IE 中的问题
Internet Explorer 对 FormData 的支持不是很好，尤其是旧版本的 IE（IE10 及以下版本不支持 FormData）。这会导致在这些浏览器中使用 FormData 时出现问题。
解决方案
为了确保在 IE 浏览器中也能正常工作，可以采取以下措施：
- 使用 Polyfill：可以使用第三方库如
formdata-polyfill来为不支持 FormData 的浏览器提供兼容性支持。 - 使用 Polyfill：可以使用第三方库如
formdata-polyfill来为不支持 FormData 的浏览器提供兼容性支持。 - 检测浏览器支持：在使用 FormData 之前，检查浏览器是否支持该功能。
- 检测浏览器支持：在使用 FormData 之前，检查浏览器是否支持该功能。
- 使用传统方法提交表单：如果不支持 FormData，可以使用传统的表单提交方式或者手动序列化表单数据。
示例代码
以下是一个简单的示例，展示了如何在不同浏览器中使用 FormData 提交表单：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FormData Example</title>
<script src="https://cdn.jsdelivr.net/npm/formdata-polyfill"></script>
</head>
<body>
<form id="myForm">
<input type="text" name="username" value="testuser">
<input type="file" name="avatar">
<button type="button" onclick="submitForm()">Submit</button>
</form>
<script>
function submitForm() {
var form = document.getElementById('myForm');
var formData = new FormData(form);
if (window.FormData === undefined) {
// 不支持 FormData，加载 polyfill 或者使用其他方法提交表单
console.log('FormData is not supported in this browser.');
return;
}
fetch('/submit', {
method: 'POST',
body: formData
}).then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
}
</script>
</body>
</html>在这个示例中，我们首先检查浏览器是否支持 FormData，如果不支持，则输出一条消息。如果支持，我们使用 Fetch API 发送表单数据。同时，我们引入了 formdata-polyfill 来确保在不支持 FormData 的浏览器中也能正常工作。
相关·内容
我试图在js中发布表单数据：var formData = new FormData(); formData.append("accountnum", 123456);
var xhr = new XMLHttpReq
浏览 2提问于2011-11-27得票数 5
回答已采纳
2回答
我对Internet Explorer有问题index.html <input type="button" value="Upload" /> or clic "U"
</form>
浏览 4提问于2012-08-10得票数 1
如何使用和检查FormData对象yepnope({ yep : 'normal.js',
nope : 'flashupload.js
浏览 1提问于2012-05-03得票数 5
回答已采纳
根据上面的文章，我成功地实现了这个功能，但是它不能在IE8上工作。$("form[name='uploader']").submit(function(e) { url: dotnetpage, data: formDa
浏览 1提问于2014-08-06得票数 1
回答已采纳
1回答
我知道IE8, IE9不支持FormData，我尝试过使用html5-formdata.js和html5shiv，但是什么都不起作用:C
有人知道FormData的替代品吗？
浏览 3提问于2013-07-13得票数 3
回答已采纳
<form method="POST"> <input name={key} key={key} type="hidden" value={value}/></form> 我正在处理一个页面，它提交了一个表单点击一些按钮，这张贴了一些数据，并在一个新的标签页打
浏览 23提问于2019-01-18得票数 3
我怎样才能在IE上工作？这在IE上是行不通的，IE浏览器不支持新的FormData()接口，IE中有没有和新的FormData()等价的接口？var fd = new FormData(); url : '/user
浏览 3提问于2013-04-02得票数 6
回答已采纳
正如官方文档中所发现的那样，IE11根本不支持FormData，或者至少不支持足够多的FormData。
const path = require("path");
module.expo
浏览 0提问于2017-11-19得票数 1
回答已采纳
if (this.formData.has('Apple')) { }
我得到以下错误“对象不支持属性或方法‘拥有’”，当我试图删除文件使用IE11 Browser.But，它是很好的工作与铬。请提供在IE11中解决此问题的任何替代解决方案。
浏览 0提问于2019-07-25得票数 1
它在chrome浏览器中工作得很好，但在IE中却不一致。有时上传文件(文件+一些附加信息)，但大多数情况下它在IE中失败。我在Fiddler中跟踪post请求，该请求的文本视图选项卡是空的。下面给出的是形成fomrdata和post请求的代码 formData.append("file", file);
formData.append("info1&
浏览 0提问于2015-11-22得票数 0
我正在尝试在angular Js中使用上传控制。该功能在chrome中运行良好，但在IE 11中不起作用。type="button" name="imageUploadButton" ng-click="uploadFiles()" value="Upload" />在controller.js文件中，$scope.getTheFiles = functio
浏览 44提问于2016-12-30得票数 3
此代码在其他浏览器(Mozilla/Chrome)中运行良好，但IE除外。').change(function () {});
var formData= new FormData(); formData.append('P
浏览 0提问于2013-01-23得票数 1
2回答
我读过( IE10支持FormData()。但当我在IE10 JavaScript控制台中键入以下内容时：我得到了错误，"FormData未定义“
IE10是否支持FormData()？有没有让它在IE10中工作的诀窍？
浏览 0提问于2013-02-19得票数 6
回答已采纳
1回答
AJAX (浓缩)formData.append("upload", form.upload.files[0]);
xmlhttp.send(formData
浏览 3提问于2014-12-17得票数 2
回答已采纳
1回答
这在Opera、Firefox、chrome和safari中都适用，但是当我在IE 11中打开我的角应用程序时，我得到了一个错误：
controllers.js (386,17// <--- line 386 var formData= new FormData();
ang
浏览 1提问于2016-06-03得票数 0
回答已采纳
2回答
：var uploadedfiles = uploadfiles.files;
}
这在我测试过的所有浏览器中都工作得很好，除了IE在这种情况下，它不理解FormData()是什么？？我现在已经在网上阅读了
浏览 0提问于2014-10-06得票数 4
回答已采纳
我有一个简单的脚本可以使用HTML5 FormData上传文件，它在大多数HTML5支持的浏览器上运行良好(我在Chrome、FireFox、Opera和IE10 上进行了测试)。唯一不能工作的浏览器是在IE10桌面上，问题是文件从未上传，服务器端Request.Files.Count总是为零。
知道为什么吗，还是这只是IE10桌面错误？<span>Status: </span> <strong id="status"></strong>
浏览 2提问于2013-04-17得票数 1
回答已采纳
我想创建一个按钮，当点击时，加载一个带有文本字段的表单，还可以添加附件(仅用于图像)。当提交时，这些将发送给我自己。做这件事最好的方法是什么？
浏览 0提问于2018-09-30得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
云直播活动推荐
腾讯云开发者
