ajax上传form表单(type='file')FormData

2023-11-07

一般上传表单的时候有两种方式:
1:form表单内实现,指定action和 method,form标签内添加一个submit的button,点击submit实现上传功能,对任何的形式的input都可以。
2:Ajax实现上传,一般情况下我们都会选择ajax,因为这可以有更多的后续操作和选择。

var args = {
    id:$('#id').val(),
    name:$('#name').val()
}
$.ajax({
    url:'/staff',
    type:'post',
    data:args,
    success:function(res){
        console.log(res);
    },
    error:function(err){
        console.log(err);
    }
})

以上是一般形式,用的比较多。但是当我们遇到input[type=”file”]时就不知道要如何向后台传输数据了,”.val()”肯定是不行的,所以就讲到FormData这个构造函数:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <form class="form-signin" role="form" method="post" enctype='multipart/form-data' id="formData">
            <h2>上传文件</h2>
            <input id="fulAvatar" name="fulAvatar" type="file" class="form-control" />
            <br/>
            <button id="btnSub" class="btn btn-primary" type="button">上 传</button>
        </form>
    </body>
    <script src="/javascripts/jquery-3.1.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $('#btnSub').click(function() {
            var form = new FormData(document.getElementById("formData"));
            $.ajax({
                url: '/staff',
                type: 'post',
                data: form,
                processData: false, //禁止序列化data,默认为true
                contentType: false, //避免JQuery对contentType做操作
                success: function(res) {
                    console.log(res);
                },
                error: function(err) {
                    console.log(err);
                }
            })
        })
    </script>
</html>

上传文件时,form标签中 method=”post”和enctype=’multipart/form-data’都是必须的


contentType 的默认值是 “application/x-www-form-urlencoded”,这里设为false,是因为我们在 form 标签中设置了enctype =“multipart/form-data”,这样请求中的 contentType 就会默认为 multipart/form-data 。而我们在 ajax 中 contentType 设置为 false 是为了避免JQuery对其操作,从而失去分界符,而使服务器不能正常解析文件。


除此之外,你还可以借助FormdData的append()方法来给data添加一些额外的数据:

var form = new FormData(document.getElementById("formData"));
form.append("slogan","suonidafahao!");

当然既然可以添加 那自然可以删除,查找,遍历

form.append("staticData","suonidafahao!");
form.append("keyName","Value111111");
form.get("keyName");//Value111111
form.delete("staticData");

更多方法请见[FormData]

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

ajax上传form表单(type='file')FormData 的相关文章

  • 如何在 Asp.Net MVC 上实现客户端 Ajax 登录(Asp.Net Webforms 解决方案的链接位于此处)

    我正在尝试在 Asp Net MVC 上实现客户端 ajax 登录 我以前在 WebForms 上设置得很好 但现在我已经转向 MVC 这给我带来了一些麻烦 如果您想要有关 Asp Net Webforms 的客户端 Ajax 登录的教程
  • php循环中的ajax在按钮单击时执行操作

    所以我有一个 php 循环 我使用 jquery 滑动切换来隐藏 显示带有 sql 结果的表 目前该表仅使用 php 加载 但由于发生了很多事情 导致了一些加载问题 我需要使用滑动切换 btn 来触发 ajax 因此它仅在按下按钮时请求当前
  • 通过ajax POST提交两次表单

    插入到mysql using php通过文件调用AJAX 前insert语句php代码执行select查询到查找重复记录并继续insert statement Issue 从ajax调用php文件时 它执行了两次并得到作为重复记录的响应 好
  • jquery ajax“发布”调用

    我是 jQuery 和 Ajax 的新手 并且在 发布 方面遇到问题 我正在使用 jQuery Ajax post 调用将数据保存到数据库 当我尝试保存数据时 它将 null 传递给我的 C 方法 jQuery 看起来像这样 functio
  • ASP.NET JQuery AJAX POST 返回数据,但在 401 响应内

    我的应用程序中有一个网页 需要调用我设置的 Web 服务来返回对象列表 这个调用是这样设置的 document ready function var response ajax type POST contentType applicati
  • 使用 Ajax 在输入时提交 Textarea,然后渲染部分内容而不刷新整个页面

    目前我正在尝试通过 JS 和 Ajax 在没有提交按钮的情况下发表评论 并且它有效 问题是当帖子提交时 页面重新加载到 post id comment页面 我希望它呈现部分内容 而不是刷新整个页面或将我带到不同的页面 我对 JS 不熟悉 任
  • 如何通过 javascript 和 ajax 调用 Scala 中的方法?

    我不知道我的标题是否有点误导 但这是我真正需要帮助的 我正在获取这个网址 get fb login fbEmail function data console log data 这是我的路线 GET fb login email prese
  • JS 库请求的常见 HTTP 标头是什么?

    使用JavaScript 框架原型 http www prototypejs org 我注意到 Ajax 请求通过一个名为X Requested With 其他 JavaScript 库 如 jQuery dojo 和 YUI 是否会向其
  • 从单个 javascript 函数向两个不同的 PHP 脚本发送两个 Ajax 请求

    是否可以同时向两个或多个 Php 脚本发送 Ajax 请求 我知道这可以串行实现 从 1 获取响应 然后从另一个获取响应 但我想知道是否可以同时实现 请协助我使用以下代码 function calShowUpload if http rea
  • 使用 Jquery 传递隐藏字段值

    我有一个正常的hidden Input field我在哪里生成random string 我需要将其附加到我尝试将数据发布到另一个页面的 URL 中 我已经做到了这一点并且效果很好 url Upload html field1 newval
  • JSONP 使用 JQuery 从 HTTPS 协议获取 JSON

    我正在尝试获取从 https 安全站点发送的 JSON 客户端希望不要使用任何服务器端语言 全部都是 Javascript 我读到 当使用 Jquery 中的 ajax 函数时 我必须使用 JSONP 才能从安全站点加载 JSON 我的第一
  • GWT - 如何组织项目以拥有多个网页以及它们之间的导航

    我是 GET 的新手 顺便说一句 它给我留下了深刻的印象 并且发现它对于像我这样熟悉 C NET 桌面技术并愿意编写 Web 应用程序的人来说非常有吸引力 我根据 GWT Eclipse 向导生成的示例启动了自己的项目 该项目生成带有面板的
  • PHP、jQuery 和 Ajax 调用乱序

    我正在使用 jQuery 进行 Ajax 调用 我有 x 数量的 Ajax 调用附加到 div 这些 Ajax 加载请求是由 PHP foreach 循环生成的 问题是它们渲染的顺序不正确 它们被设置在数组中
  • Ajax - 限制列表的加载,然后在滚动上加载其余部分

    我有一家商店 在一个页面上显示某个类别的所有产品 这是店主喜欢的方式 因此不能选择分页 为了缩短某些重类别的加载时间 我希望实现一个可以加载许多产品的脚本 li s然后在页面滚动上加载另一组 页面就是用这个结构生成的 div ul clas
  • .live() 或 .livequery()

    我有一个Ajaxed的网站 Ajax的内容来自其他页面 例如about html contact html ajax 从名为 main content 的 div 获取内容 但是在 ajax 调用之后 我的其余脚本就中断了 比如tinysc
  • 在 JQuery 中发布表单并填充 DIV - 在 IE 中损坏

    我正在尝试创建一个通过 jQuery 发布数据并将返回值填充到同一 DIV 中的表单 这样页面就不会在发布操作时刷新 div div
  • 发送 POST 请求时 JSON 原语无效

    我有以下 ajax 请求 其中我尝试将 JSON 对象发送到服务器 function sendData subscriptionJson ajax type POST url Url Action SubscribeSecurities S
  • jQuery / Ajax:如何循环遍历数组作为 Ajax 成功函数的一部分

    我有一个阿贾克斯调用返回一个数组并需要对该数组中的每个值执行某些操作 到目前为止 我有以下内容 但这会返回以下错误 Uncaught TypeError Cannot use in operator to search for length
  • ASP.net Gridview 分页在 UpdatePanel 中不起作用

    虽然类似的问题已经被问过很多次了 但问题仍然没有解决 这是问题 我有一个GridView它包含在选项卡容器中AJAX控件本身位于UpdatePanel Gridview工作得很好并且其相应的方法被准确地触发 但是当我启用paging 例如
  • 动态速度计 javascript 或 jquery 插件

    我希望有动态ajax插件在页面上显示速度计 一个想法是我设置一个背景并旋转针 有人知道相关插件吗 这里有一些供您参考 http bernii github com gauge js http bernii github com gauge

随机推荐

  • 还分不清 Cookie、Session、Token、JWT?

    什么是认证 Authentication 通俗地讲就是验证当前用户的身份 证明 你是你自己 比如 你每天上下班打卡 都需要通过指纹打卡 当你的指纹和系统里录入的指纹相匹配时 就打卡成功 互联网中的认证 用户名密码登录 邮箱发送登录链接 手机
  • vscode查询项目代码行数

    vscode版本 4 13 1 1 打开vscode搜索 2 在输入框中输入 b b 并选择输入框内第三个图标使用正则表达式 3 结果出来了 最近知道了另外一个方法 使用命令行进行统计 例如只统计src内代码行数 直接使用git bash执
  • MySQL:explain结果中Extra:Impossible WHERE noticed after reading const tables

    MySQL explain结果中Extra Impossible WHERE noticed after reading const tables 前情提要 出现的情况 原因 前情提要 今天上午有同事突然找我 向我反馈说在对MySQL中的语
  • Qt自动生成ui_xxx.h和moc_xxx.cpp

    在 ui的常规中 命令行 QT DIR bin uic exe Drag2DWidget ui o ui Drag2DWidget h 说明UIC Drag2DWidget ui 输出ui Drag2DWidget h Outputs 附加
  • 包装类和泛型的意思

    目录 包装类 泛型 Generic 若泛型中存在多个类型参数 成员变量的类型就不一定一致 包装类 定义泛型对象时 只能使用类 基本类型不能保存到泛型中 必须使用包装类 Object类可以接收所有引用数据类型 为了让Object可以接收所有的
  • 京东商智功能架构

    京东商智功能架构 数据报表 店铺报表 销售数据 流量数据 客户数据 产品报表 销售数据 流量数据 评价数据 营销报表 活动效果 推广效果 客户获取成本 数据分析 销售分析 销售趋势 销售预测 流量分析 流量来源 流量质量 客户分析 客户画像
  • 【无源物联网】物联网的下一个风口?

    作 者 道哥 10 年嵌入式开发老兵 专注于 C C 嵌入式 Linux 关注下方公众号 回复 书籍 获取 Linux 嵌入式领域经典书籍 回复 PDF 获取所有原创文章 PDF 格式 文章目录 无源物联网 现有的无源物联网设备 从 蓝牙
  • TextView textSize 文字大小

    TextView 很常见的控件 关于文字大小的方法有 android widget TextView getTextSize 返回值的单位是PX return the size in pixels of the default text s
  • busybox简介

    busybox BusyBox 是标准 Linux 工具的一个单个可执行实现 BusyBox 包含了一些简单的工具 例如 cat 和 echo 还包含了一些更大 更复杂的工具 例如 grep find mount 以及 telnet 有些人
  • 150. 逆波兰表达式求值 python

    给你一个字符串数组 tokens 表示一个根据 逆波兰表示法 表示的算术表达式 请你计算该表达式 返回一个表示表达式值的整数 注意 有效的算符为 和 每个操作数 运算对象 都可以是一个整数或者另一个表达式 两个整数之间的除法总是 向零截断
  • 美容行业的翻身仗:ChatGPT带你玩转营销活动

    今天给大家带来一个 用ChatGPT给美容院 美容店 美容行业的商家 出一个营销策划活动方案的实例 在这个竞争激烈的美容行业 想要脱颖而出 你得有点与众不同的手段 别再拿那些陈词滥调的营销策略来忽悠我了 今天我要给你揭示一个行业的秘密武器
  • 【STATA】代码自用

    数据处理 描述性统计 输出 asdoc sum stat N mean sd tstat p1 p99 fs 7 dec 2 结果展示去除变量 reghdfe absorb vr 一对多合并 merge 1 m Symbol Year us
  • docker镜像制作(python2.7,redis)

    四 自制docker镜像 初始化 在任意文件夹下 mkdir mydocker cd mydocker 1 初始化Dockerfile文件 以python 2 7为模板制作镜像 注意要提前下载好该镜像 FROM python 2 7 sli
  • 从汇编分析函数调用堆栈详细过程

    前言 首先来说 我们今天的学习并不是为了学习汇编语言 而是为了更好地分析一些问题的底层原理 进入正题 首先由下面简单的代码我们来考虑两个问题 1 main函数调用sum sum执行完以后 怎么知道回到哪个函数中 2 sum函数执行完 回到m
  • STM32的SYSTICK详解

    什么是SysTick 这是一个24位的系统节拍定时器system tick timer SysTick 具有自动重载和溢出中断功能 所有基于Cortex M3处理器的微控制器都可以由这个定时器获得一定的时间间隔 SysTick作用 在单任务
  • Unity 利用AES给文件加密与解密

    using System using System Collections using System Collections Generic using System IO using System Security Cryptograph
  • OpenStack H版发布

    根据官方发布的消息 OpenStack 2013 2 代号Havana 最终版已经发布 除了增加OpenStack Metering Ceilometer 和OpenStack Orchestration Heat 两个新组件外 还完成了4
  • python3-关于GitHub的最基本操作

    阅读目录 介绍 什么是GitHub 创建存储库 创建一个分支 做一个提交 打开拉取请求 合并拉取请求 一 介绍 Hello World项目是计算机编程历史悠久的传统 这是一个简单的练习 可以让你在学习新东西时开始学习 让我们开始使用GitH
  • DB2检查死锁和解锁的命令(AIX系统)

    在交易量比较大的系统上经常由于程序原因或者数据库配置参数不当导致死锁发生 在交易高峰期 检查易发生死锁的表就很有必要 常用命令如下 1 检查监视器开关是否打开 db2 get monitor switches 如果锁定信息中
  • ajax上传form表单(type='file')FormData

    一般上传表单的时候有两种方式 1 form表单内实现 指定action和 method form标签内添加一个submit的button 点击submit实现上传功能 对任何的形式的input都可以 2 Ajax实现上传 一般情况下我们都会