<think>我们正在处理一个关于如何将FormData中的文件数据添加到HTML元素中的问题。
用户要求：将通过FormData处理的文件数据
使用appendTo添加到指定的div容器中。
具体来说，是要添加到id为"fileTempStor
List"的ul元素中。
分析：
1
. FormData
对象通常用于通过XMLHttpRequest发送表单数据，特别是用于上传文件。它本身并不直接提供访问其中数据的
方法（除了
遍历），而且我们不能直接从中提取文件
对象并显示在
页面上吗？实际上，我们可以通过
遍历FormData来获取文件信息，但是要注意，FormData中的值可能是字符串或Blob（文件）
对象。
2
. 用户想要将文件数据（可能是文件名、大小等信息）以某种
形式（比如列表项）添加到ul元素中。
3
. 注意：我们不能直接将FormData
对象添加到DOM中，而是需要从中提取文件信息，然后创建相应的DOM元素（如li）并添加到ul中。
4
. 由于FormData
对象不可直接
遍历查看所有内容（但实际可以
遍历），我们可以通过之前添加的字段名来获取对应的值，或者通过
遍历FormData的条目。
5
. 但是，用户没有明确说明FormData中已经添加了哪些文件字段。通常，我们可能会在FormData中添加多个文件，但这里我们假设每个文件都是单独添加的，或者是一个文件列表。
6
. 根据引用[3]中的示例，FormData中添加文件的方式是：formData
.append('file', data
.value
.file!)。所以，我们可能需要根据字段名（例如'file'）来获取文件。
7
. 然而，FormData的getAll
方法可以获取指定键的所有值（因为同一个键可以添加多个值），这样我们就可以得到所有文件。
8
. 但是，用户可能希望展示的是文件列表，包括文件名、大小等信息。
9
. 另外，用户提到了
使用appendTo，这通常是jQuery的
方法，但这里我们也可以
使用原生JavaScript来实现。
步骤：
1
. 获取FormData
对象（假设已经创建并添加了文件）。
2
. 从FormData中获取所有文件（通过特定的字段名，或者
遍历所有键值对）。
3
. 对于每个文件，创建一个li元素，并在其中显示文件信息（如文件名、大小等）。
4
. 将每个li元素添加到id为"fileTempStor
List"的ul元素中。
注意：如果FormData中同一个字段名有多个文件（比如多文件上传），我们需要
遍历每个文件。
但是，问题在于：FormData
对象在创建后，我们无法直接通过字段名获取文件，除非我们知道字段名。因此，我们需要知道在FormData中文件是用什么字段名添加的。
假设我们不知道字段名，我们可以
遍历FormData的所有键，然后判断值是否是文件。但是，如果FormData中还有其他非文件的字段，我们可能不希望显示它们。
因此，我们需要明确：
- 用户希望显示哪些字段？可能只显示文件字段。
- 或者，用户希望显示所有文件字段，并且每个文件字段对应一个或多个文件。
由于问题描述不是很详细，我们可以假设用户只关心特定的文件字段（比如'file'），或者我们希望显示所有类型为文件的字段。
方案一：如果我们知道文件字段名（例如'file'），那么我们可以：
let files = formData
.getAll('file'); // 返回所有键为'file'的值
然后
遍历files，每个文件创建一个li元素。
方案二：如果我们不知道字段名，或者有多个文件字段，我们可以
遍历FormData：
for (const [key, value] of formData) {
if (value instanceof File) {
// 处理单个文件
} else if (value instanceof Blob) { // 或者也可能是Blob
// 但是注意，FormData中
append的文件可以是File
对象（File是Blob的子类）
}
}
但是，注意：FormData的
append方法添加文件时，值可以是File
对象。另外，如果一次添加多个文件（比如通过input的multiple选择），我们可能会添加一个文件数组吗？实际上，FormData的
append方法一次只能添加一个文件（或一个Blob）。如果要添加多个文件，需要多次调用
append（
使用同一个字段名或不同字段名）。
因此，我们可以这样
遍历：
for (const pair of formData
.entries
()) {
const key = pair[0];
const value = pair[1];
if (value instanceof File) {
// 处理文件
}
}
但是，注意：如果同一个字段名添加了多个文件，那么每个文件都会作为一个单独的条目。
所以，我们采用
遍历FormData的方式来获取所有文件。
步骤：
1
. 获取ul元素：const ul = document
.getElementById('fileTempStor
List');
2
. 遍历FormData的条目：
let formData = new FormData
(); // 假设已经存在的FormData
对象
for (let [key, value] of formData
.entries
()) {
// 检查value是否是File
对象（因为文件是File
对象，而File是Blob的子类）
if (value instanceof File) {
// 创建li元素
let li = document
.createElement('li');
// 设置li的内容，例如显示文件名和大小
li
.textContent = `
${value
.name} (
${value
.size} bytes)`;
// 或者更友好的文件大小显示，但这里简单处理
ul
.appendChild(li);
}
}
但是，用户要求
使用appendTo，这通常是jQuery的
方法。如果用户
使用jQuery，我们可以用jQuery实现。
使用jQuery实现：
// 假设formData是已经存在的FormData
对象
$('#fileTempStor
List')
.empty
(); // 清空当前列表
for (let [key, value] of formData
.entries
()) {
if (value instanceof File) {
$('<li>')
.text(`
${value
.name} (
${value
.size} bytes)`)
.appendTo('#fileTempStor
List');
}
}
注意：如果同一个文件被添加多次（比如多个字段），那么就会显示多次。
另外，我们也可以考虑只显示特定字段的文件，比如只显示字段名为'file'的文件。那么：
let files = formData
.getAll('file');
for (let file of files) {
$('<li>')
.text(`
${file
.name} (
${file
.size} bytes)`)
.appendTo('#fileTempStor
List');
}
根据用户需求，他们可能希望显示所有文件，而不管字段名是什么。所以，我们采用
遍历所有条目的方式。
但是，注意：FormData中可能还包含非文件的字段，比如文本字段，我们不希望显示这些。
因此，我们只处理值为File
对象的条目。
完整代码（
使用jQuery）：
// 假设formData是已经存在的FormData
对象
var ul =
$('#fileTempStor
List');
ul
.empty
(); // 清空列表，避免重复添加
formData
.for
Each(function(value, key) {
if (value instanceof File) {
$('<li>')
.text(value
.name + ' (' + value
.size + ' bytes)')
.appendTo(ul);
}
});
或者
使用entries：
for (let [key, value] of formData
.entries
()) {
if (value instanceof File) {
$('<li>')
.text(value
.name + ' (' + value
.size + ' bytes)')
.appendTo('#fileTempStor
List');
}
}
注意：在FormData中，如果
使用append添加同一个字段多次，那么每个值都会作为一个条目。
另外，如果用户添加的是Blob
对象（不是File），那么它没有name属性。所以，我们可能需要根据实际情况调整。但通常，文件上传
使用的是File
对象，它有name属性。
如果用户希望显示更多的文件信息，可以自行扩展。
但是，问题中用户要求“
使用appendTo添加到指定的div容器中”，而容器是ul，所以我们添加的是li元素。
最后，注意：这个操作是在客户端进行的，不需要发送到服务器。
示例代码：
// 假设我们有一个FormData
对象，已经添加了一些文件
var formData = new FormData
();
formData
.append('file1', fileObject1); // fileObject1是一个File
对象
formData
.append('file2', fileObject2);
// 然后调用我们的函数
function
appendFormDataFilesToUl(formData, ulId) {
var ul =
$('#' + ulId);
ul
.empty
();
for (var [key, value] of formData
.entries
()) {
if (value instanceof File) {
$('<li>')
.text(value
.name + ' (' + value
.size + ' bytes)')
.appendTo(ul);
}
}
}
appendFormDataFilesToUl(formData, 'fileTempStor
List');
注意：如果FormData中没有文件，那么列表将为空。
另外，如果用户希望保留之前列表中的内容，可以不清空ul，但问题中用户可能希望每次更新时重新显示，所以清空是合理的。
如果用户不想
使用jQuery，我们可以用原生JavaScript实现：
function
appendFormDataFilesToUl(formData, ulId) {
var ul = document
.getElementById(ulId);
ul
.innerHTML = ''; // 清空
for (var pair of formData
.entries
()) {
var key = pair[0];
var value = pair[1];
if (value instanceof File) {
var li = document
.createElement('li');
li
.textContent = value
.name + ' (' + value
.size + ' bytes)';
ul
.appendChild(li);
}
}
}
根据用户需求，我们提供原生JavaScript版本或jQuery版本。由于问题中没有明确，我们可以提供
两种，但用户要求
使用appendTo，这暗示了jQuery，所以我们优先
使用jQuery。
但是，注意：用户可能并没有
使用jQuery，所以我们需要确认。如果用户没有
使用jQuery，那么
使用原生JavaScript更安全。
由于问题中没有明确，我们可以同时提供
两种方案，或者根据用户的环境选择。
但是，用户的问题描述中并没有提到jQuery，只是说“
appendTo”，而
appendTo是jQuery的
方法。所以，我们假设用户正在
使用jQuery。
因此，我们提供jQuery版本的解决方案。
代码示例：
// 假设formData是已经创建并添加了文件的FormData
对象
// 调用以下函数
function
appendFilesFromFormData(formData) {
var
$ul =
$('#fileTempStor
List');
$ul
.empty
(); // 清空现有的列表项
//
遍历FormData中所有的文件
formData
.for
Each(function(value, key) {
if (value instanceof File) {
$ul
.append(
$('<li>')
.text(value
.name + ' (' + value
.size + ' bytes)'));
}
});
}
注意：FormData的for
Each方法是可用的，但注意兼容性。如果需要兼容旧
浏览器，可以
使用entries和for-of循环，或者
使用迭代器。
但是，for-of循环在旧版IE中可能不支持。如果用户需要兼容，可以用其他循环方式。
不过，考虑到现代
浏览器的支持情况，我们
使用上述
方法。
如果用户没有
使用jQuery，我们可以提供原生JavaScript版本：
function
appendFilesFromFormData(formData) {
var ul = document
.getElementById('fileTempStor
List');
ul
.innerHTML = ''; // 清空
//
使用for
...of循环
遍历formData
.entries
()
var entries = formData
.entries
();
var next = entries
.next
();
while (!next
.done) {
var pair = next
.value;
var key = pair[0];
var value = pair[1];
if (value instanceof File) {
var li = document
.createElement('li');
li
.textContent = value
.name + ' (' + value
.size + ' bytes)';
ul
.appendChild(li);
}
next = entries
.next
();
}
}
或者更简洁的for
...of（如果支持）：
function
appendFilesFromFormData(formData) {
var ul = document
.getElementById('fileTempStor
List');
ul
.innerHTML = '';
for (var pair of formData
.entries
()) {
var value = pair[1];
if (value instanceof File) {
var li = document
.createElement('li');
li
.textContent = value
.name + ' (' + value
.size + ' bytes)';
ul
.appendChild(li);
}
}
}
根据用户的环境选择
使用。
由于用户要求
使用appendTo，我们提供jQuery版本作为答案。
但是，用户的问题描述中并没有提到jQuery，所以我们也可以提供原生版本，并说明如果
使用jQuery可以怎样。
为了全面，我们提供
两种方法。
最终答案：
您可以通过以下步骤将FormData中的文件信息添加到id为"fileTempStor
List"的ul元素中：
方法一（
使用原生JavaScript）：
```javascript
function displayFormDataFiles(formData) {
const ul = document
.getElementById('fileTempStor
List');
ul
.innerHTML = ''; // 清空列表
//
遍历FormData的所有条目
for (const pair of formData
.entries
()) {
const value = pair[1];
// 检查是否为文件
对象
if (value instanceof File) {
const li = document
.createElement('li');
li
.textContent = `
${value
.name} (
${(value
.size / 1024)
.toFixed(2)} KB)`;
ul
.appendChild(li);
}
}
}
```
方法二（
使用jQuery）：
```javascript
function displayFormDataFiles(formData) {
const
$ul =
$('#fileTempStor
List');
$ul
.empty
(); // 清空列表
formData
.for
Each(function(value, key) {
if (value instanceof File) {
$('<li>')
.text(`
${value
.name} (
${(value
.size / 1024)
.toFixed(2)} KB)`)
.appendTo(
$ul);
}
});
}
```
注意：这里我们将文件大小转换为KB并保留两位小数，以便更友好地显示。您可以根据需要调整显示格式。
使用方法：
在您创建并填充FormData
对象后，调用上述函数，并将FormData
对象作为参数传入。
例如：
```javascript
const formData = new FormData
();
// 假设fileInput是一个input元素，类型为file，用户选择了文件
const files = fileInput
.files;
for (let i = 0; i < files
.length; i++) {
formData
.append('file' + i, files[i]);
}
// 调用函数显示文件
displayFormDataFiles(formData);
```
这样，FormData中的所有文件都会以列表项的
形式添加到ul中。
注意：如果FormData中有非文件的条目，它们将被忽略。
相关问题：
1
. 如何从FormData
对象中获取特定字段的文件？
2
. 如何在上传前预览FormData中的图片文件？
3
. 如何限制FormData中添加的文件类型和大小？
4
. 如何删除FormData中已添加的某个文件？
5
. FormData
对象支持哪些数据类型？</think>要将通过 `FormData` 处理的文件数据动态添加到指定的 `ul` 元素中（ID 为 `fileTempStor
List`），需要
遍历 `FormData` 中的文件数据，并为每个文件创建对应的列表项（`li`）。以下是具体实现步骤：
---
### 解决方案（原生 JavaScript 实现）
```javascript
// 获取目标 ul 元素
const file
ListContainer = document
.getElementById('fileTempStor
List');
// 创建 FormData
对象（假设已添加文件）
const formData = new FormData
();
formData
.append('file', selectedFile); // 添加文件（selectedFile 是文件
对象）
//
遍历 FormData 中的文件并添加到 ul
for (const [fieldName, file] of formData
.entries
()) {
if (file instanceof File) { // 确保当前项是文件
// 创建 li 元素
const
listItem = document
.createElement('li');
// 填充文件信息（文件名、大小、类型等）
listItem
.innerHTML = `
<span>文件名：
${file
.name}</span>
<span>大小：
${Math
.round(file
.size / 1024)} KB</span>
<span>类型：
${file
.type || '未知'}</span>
`;
// 将 li 添加到 ul 中
file
ListContainer
.appendChild(
listItem);
}
}
```
---
### 关键说明
1
. **
遍历 FormData 数据**：
-
使用 `formData
.entries
()` 获取键值对迭代器，通过循环检查每个值是否为 `File`
对象。
- 过滤非文件数据（如文本字段），确保只处理文件。
2
. **动态创建列表项**：
- 为每个文件创建 `li` 元素，插入文件名、大小、类型等基本信息（可根据需求调整）。
-
使用 `
appendChild` 将 `li` 添加到目标 `ul` 容器。
3
. **文件信息展示**：
- `file
.name`：文件名
- `file
.size`：文件大小（字节），示例中转换为 KB
- `file
.type`：文件 MIME 类型（如 `image/png`）
---
### 示例效果
最终生成的 HTML 结构如下：
```html
<ul id="fileTempStor
List">
<li>
<span>文件名：example
.jpg</span>
<span>大小：2048 KB</span>
<span>类型：image/jpeg</span>
</li>
<!-- 其他文件
... -->
</ul>
```
---
### 注意事项
1
. **兼容性**：
- `FormData
.entries
()` 在现代
浏览器中支持良好（IE 不支持），如需兼容旧
浏览器，可用 `for
...of` 或 `Array
.from` 替代。
2
. **文件类型验证**：
- 可通过 `file
.type` 限制允许的文件类型（如只接受图片）：
```javascript
if (!file
.type
.startsWith('image/')) {
console
.error('仅支持图片文件！');
continue;
}
```
3
. **性能优化**：
- 如果文件数量多，建议
使用文档片段（`DocumentFragment`）批量添加元素，减少 DOM 操作次数：
```javascript
const fragment = document
.createDocumentFragment
();
for (const [fieldName, file] of formData
.entries
()) {
if (file instanceof File) {
const
listItem = document
.createElement('li');
//
...填充内容
fragment
.appendChild(
listItem);
}
}
file
ListContainer
.appendChild(fragment);
```
---
### 相关问题
1
. 如何从 FormData 中提取文件并显示预览图？
> 可通过 `URL
.createObjectURL(file)` 生成临时 URL，用于 `<img>` 标签预览[^3]。
2
. 如何在上传前验证 FormData 中的文件大小？
>
遍历文件时检查 `file
.size`，若超过阈值则提示用户[^3]。
3
. FormData 能同时传输文件和文本数据吗？如何区分？
> 可以，通过 `formData
.append('text_field', '文本')` 添加文本，
遍历时用 `instanceof File` 区分类型[^4]。
4
. 如何动态删除已添加到 ul 中的文件项？
> 为每个 `li` 添加删除按钮，绑定事件移除当前元素及 FormData 中对应的文件[^2]。
5
. 为什么 FormData 中的数据无法直接用 `console
.log` 查看？如何调试？
> FormData 内容不可直接打印，需通过
遍历或 `for (const [k,v] of formData)` 检查[^2]。
[^1]:
使用 `
append()`
方法添加键值对到 FormData
对象，支持文件和文本数据。
[^2]:
遍历 FormData 条目需通过迭代器，直接打印可能显示为空。
[^3]: 在 Vue/Uniapp 中通过 FormData 提交文件时，需设置请求头 `'Content-Type': 'multipart/form-data'`。
[^4]: Java 后台可通过 `@RequestParam("字段名") MultipartFile file` 接收 FormData 中的文件。
本文介绍了使用jQuery进行数据遍历的两种方法：一种是通过索引和内容遍历数值；另一种是通过成员名称和变量内容遍历对象。这两种方法常见于网页动态内容生成等场景。
扫一扫
256
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
