3.11formdata的使用

最新推荐文章于 2025-08-12 18:00:54 发布

weixin_30312563

最新推荐文章于 2025-08-12 18:00:54 发布

阅读量93

点赞数

CC 4.0 BY-SA版权

文章标签： php json

原文链接：http://www.cnblogs.com/mrxinxin/p/10513697.html

本文介绍了一种使用JavaScript的FormData对象上传文件的方法，并展示了如何解析服务器返回的JSON数据，将其显示在网页上。具体步骤包括创建FormData实例，添加文件，设置AJAX请求参数，发送请求以及成功回调中解析数据。

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

var formData = new FormData();

formData.append('files[]',document.getElementById("file").files[0]);

JgAjax({

url:'sub_act.php?act=upload_file',//地址

type: 'POST',//方式

contenType: "",

flag: '2',//上传文件时把flag设置为2，一般请求则不需要

dataType: "json",

data: formData,//数据

success:function(data){

console.log(data);

// 再下部li中进行添加

var oli='';

for(var i=0;i<data.res.length;i++){

oli+="<li><p><a class='hr' href='"+data.res[i].attachment+"'>"+data.res[i].rel_attachment+"</a></p><a href='javascript:;' onclick='delelteUpFile(\"'+data.res[i].attachment+'\")'>删除</a></li>"

}

document.getElementById('upfile_list').innerHTML=oli;

}

});

转载于:https://www.cnblogs.com/mrxinxin/p/10513697.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30312563

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

RN安卓FormData上传信息问题--后端springboot接收

qq_35453275的博客

06-04

1089

背景给安卓端完成了批量图片上传接口,但手机端调用后上传失败 (本人是不务正业的后端). 问题其他普通接口可以正常使用(http请求),上传文件接口无法请求报错TypeError: Network request failed 若普通的http无法请求可能是安卓明文问题见:https://blog.csdn.net/qq_35453275/article/details/106186280 上传文件接口可以正常调用但报错400 500 使用RN的Debug查看请求数据上传接

多模态ai大模型OmniLMM之docker安装全流程

04-26

591

qinzuoyu/anaconda3路径随意换，换到自己安装 “Anaconda3-2020.11-Linux-x86_64”时候选的路径。8.把这些东西都都都放到/home/aistudio/下，看个人习惯了~因为一会的执行文件会用到这些路径~10.把原来这些代码简单改改，改成http请求，接收上传文件式的就基本ok了~这个东西唯一的缺点就是，茫茫多的依赖要下载。关注了好久这个东西，一直没有GPU服务器，如今终于拿到，马上开始部署~~这些虽然是 OmniLMM-3B的包~但是效果已经挺好的了~

参与评论您还未登录，请先登录后发表或查看评论

RN中使用fetch进行网络请求的几种场景和姿势

openglnewbee的博客

01-09

2258

1. 对于标准的输入json body的请求，我们需要使用json.stringify转换之然后放入body.2. 对于application/x-www-form-urlencode格式的请求接口，我们需要拼装转换body： var formBody = []; for (var property in bodyObj) { var encode

如何使用 JavaScript 和 PHP 上传多个文件

allway2的博客

02-04

1067

添加多个文件元素以上传多个文件非常耗时，您需要为此编写一些额外的代码。您可以通过启用多个文件选择来使用单个文件元素。读取选定的文件并附加到 FormData 对象中以传递给 AJAX 文件进行上传。在本教程中，我将展示如何使用 JavaScript 和 PHP上传多个文件。下载代码内容 HTML PHP JavaScript 输出结论 1.HTML 创建文件和按钮元素。要启用多个文件选择multiple，请在文件元素中添加属性。在调用函数的按钮上添.

Web 前沿——HTML5 Form Data 对象的使用

weixin_34320159的博客

02-26

111

　　XMLHttpRequest Level 2 添加了一个新的接口——FormData。利用 FormData 对象，我们可以通过 JavaScript 用一些键值对来模拟一系列表单控件，我们还可以使用 XMLHttpRequest 的 send() 方法来异步的提交表单。与普通的 Ajax 相比，使用 FormData 的最大优点就是我们可以异步上传二进制文件。您可能感兴趣的相关文章 ...

上传图片并回显

zuo_zuo_blog的博客

04-09

1784

<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/html"> <head> <meta charset="UTF-8"> <title>多张图片上传</title> <script src="js/jquery.min.js"></s...

Python网络爬虫使用教程

热门推荐

tttalk的博客

06-13

1万+

python爬虫资源抓取--urllib/requests/requests-html、正则表达式、数据解析-Beautiful Soup/lxml/selectolax、自动化爬虫--selenium、爬虫框架--Scrapy/pyspider、模拟登录与验证码识别、autoscraper

Flask文件处理全攻略：安全上传下载与异常处理实战

专注于全栈开发领域

06-01

1302

Flask文件上传下载的完整实现方案多层次的安全防护措施完善的异常处理机制性能优化和最佳实践使用Nginx处理静态文件实施定期安全审计建立文件备份机制Flask官方文档OWASP文件上传安全指南Celery分布式任务处理🔥🔥🔥道阻且长,行则将至,让我们一起加油吧！🌙🌙🌙WASP文件上传安全指南Celery分布式任务处理🔥🔥🔥道阻且长,行则将至,让我们一起加油吧！🌙🌙🌙。

写一个养老院服务系统的完整代码运用django5.1.6和Python3.11框架符合毕业设计样式包括Vue，划分出用户使用的功能和护理人员能使用的功能和管理员能使用所以功能，代码完整具有准确的操作步骤，整个系统样式美观温馨。在pycharm中命名为nursing_home_project老人信息，工作人员信息，家属信息，包括床位，护理计划，护理费用管理，活动信息，探视预约，在线交流等。

03-20

好的，用户需要基于Django 5.1.6和Python 3.11开发一个养老院服务系统，包含Vue前端，分三个角色，多个功能模块，还要界面美观，在PyCharm中实现。首先，我需要确定项目的整体架构。Django作为后端，Vue作为前端，...

wangEditor3上传本地视频

11-12

var date = new FormData(); date.append("file", files[0]); $.ajax({ type: "POST", url: "../../import/upload", data: date, dataType: 'json', async: false, cache: false, contentType: false, ...

如果将SenseVoice部署为http可调用的方式该如何部署？调用那方如何对接这个api

07-14

- 如果需要实时流式传输，可以考虑使用WebSocket，但Flask本身不支持WebSocket，可以使用Flask-SocketIO或单独使用WebSocket服务器。针对实时流式API，我们可以使用WebSocket来实现。这里提供一个简单的思路： ...

前端项目搭建记录

qq_64668270的博客

07-16

768

types/node 包允许您在TypeScript项目中使用Node.js的核心模块和API，并提供了对它们的类型检查和智能提示的支持。商品列表信息未正常展示，问题： listProduct 手写错误。注意写代码需要细心，中午少吃个鸡腿。在在tsconfig.app.json 添加如下代码.穿插一个AddProduct.vue。安装@types/node。前端页面使用vs code。

react 之 fetch 登录请求formData提交参数

hahahhahahahha123456的博客

08-23

8356

1、 react 表单按照以往 js 获取表单数据的方法，当然是获取到该 input 的 ID，然后根据 id 定位后获取到其 value 值，但是很可惜，react 不能这样做。 react 对表单元素做了优化处理，对其进行抽象处理，使其使用方式更统一和规范。约束性组件和非约束性组件约束性组件，简单来说就是React管理了它的value，而非约束性组件的value则是由原生的DOM...

var fd = new FormData();传不了数据解决方案

涛哥是个大帅比

03-03

9345

var fd = new FormData();传不了数据 var fd = new FormData(); ------解决方案-------------------- var fd = new FormData(); fd.append("FileData",document.getElementById('upload_file').files[0

如何构建PHP表单页面及验证相关原理（PHP基础）

最新发布

2301_81242582的博客

08-12

1100

思路为通过if – else + empty()函数语句实现是否为空的验证以及错误信息的设置，最终在HTML页面对错误信息进行输出。

在Linux中模拟配置高性能web服务器

qq_59278745的博客

08-11

517

Linux高性能Web服务器配置与IO模型解析本文介绍了Linux环境下高性能Web服务器的配置原理和关键IO模型。主要内容包括： Web服务基础：详细解析Apache的三种工作模式（prefork/worker/event）和Nginx架构特点，比较不同模式的优缺点及适用场景。性能影响因素：从客户端硬件、网络条件到服务端架构设计、并发处理等方面分析影响Web性能的关键因素。 IO模型详解：深入讲解磁盘IO和网络IO的工作原理，包括机械磁盘的寻道时间、旋转延迟等性能指标计算。 IO模型分类：系统阐述同步

攻防世界-ics-05（远程文件执行）

weixin_51334173的博客

08-11

283

大致浏览一下网页，发现就这边会有东西。看一下源码会不会有东西或者稍微点击一下这个页面的内容看会不会出现东西。点击了一下这个云平台设备维护中心发现url变了，是get的方法传page参数。

从零开始的云计算生活——项目实战容器化

Britz_Kevin的博客

08-11

501

脚本启动所有组件，Filebeat配置发送日志到Logstash。：Alpine基础镜像 + rsync配置。设置MySQL/Redis/Nginx模板。Zabbix添加所有容器IP监控。php.ini示例（保存在。

FormData使用

07-12

<think>我们正在讨论如何使用FormData对象进行表单数据收集和提交。根据引用[1]和[2]，我们可以知道FormData是JavaScript中用于处理表单数据的API，它可以直接从表单元素创建，也可以手动添加数据，并且支持文件上传。同时，引用[3]提到了在Spring MVC中处理嵌套表单数据，但用户的问题主要集中在前端部分。用户的问题：如何在前端使用FormData对象进行表单数据收集和提交？回答步骤： 1. 创建FormData对象：可以从表单元素创建，也可以手动创建并添加数据。 2. 添加数据：可以通过append方法添加额外的数据。 3. 提交数据：使用fetch或XMLHttpRequest发送FormData对象。注意：引用[1]提供了FormData的基本用法，引用[2]展示了表单的HTML结构，我们可以结合两者。另外，用户要求使用中文回答，并且按照系统级指令处理数学表达式（但本问题不涉及数学表达式，所以可以忽略），同时需要生成相关问题。回答结构： - 先介绍FormData的基本概念和用途。 - 分步骤说明如何收集表单数据（包括从表单创建和手动添加）。 - 分步骤说明如何提交数据（使用fetch示例）。 - 简要比较FormData和JSON格式（根据引用[1]中的比较表，但用户主要问操作，所以简单提及即可）。 - 最后生成相关问题。由于引用[3]是关于后端处理嵌套表单的，与用户问题关系不大，可以忽略。下面开始组织回答：</think>### 如何使用 FormData 对象进行表单数据收集和提交 #### 一、FormData 基础操作 1. **从表单创建 FormData 对象** 通过 `querySelector` 获取表单元素，直接生成 FormData 对象： ```javascript const form = document.querySelector('#myForm'); // 获取表单元素 const formData = new FormData(form); // 自动收集所有带 name 属性的表单控件 ``` 2. **手动添加数据** 使用 `append()` 方法添加额外字段（支持文本/文件）： ```javascript formData.append('timestamp', Date.now()); // 文本数据 formData.append('avatar', fileInput.files[0]); // 文件数据 ``` 3. **操作表单数据** - 获取值：`formData.get('username')` - 删除字段：`formData.delete('temp_field')` - 检查存在：`formData.has('email')` #### 二、提交表单数据使用 `fetch` 发送数据（支持文件上传）： ```javascript fetch('/api/submit', { method: 'POST', body: formData // 自动设置 Content-Type 为 multipart/form-data }) .then(response => response.json()) .catch(error => console.error('提交失败', error)); ``` #### 三、特殊场景处理 1. **动态表单字段** 循环添加多个字段： ```javascript const tags = ['js', 'web', 'api']; tags.forEach(tag => formData.append('tags[]', tag)); // 后端接收数组 ``` 2. **文件上传** ```html <input type="file" id="doc" name="document" multiple>  ``` ```javascript const files = document.getElementById('doc').files; Array.from(files).forEach(file => formData.append('docs', file)); ``` 3. **嵌套数据结构** 需后端配合解析（如 Spring MVC 的 `@ModelAttribute`）： ```javascript formData.append('user.profile.bio', '前端开发者'); // 点语法表示嵌套 ``` #### 四、与 JSON 提交对比 | 特性 | FormData | JSON | |---------------|------------------------------|---------------------| | 文件支持 | ✅ 原生 | ❌ 需 Base64 编码 | | 内容类型 | `multipart/form-data` | `application/json` | | 数据结构 | 扁平键值对 | 复杂嵌套结构 | | 编码效率 | 更高（二进制直接传输） | 较低（文本编码） | > 优先选择 FormData 的场景：包含文件上传、需要兼容旧表单、简化数据编码流程[^1][^2]。