<form method="POST"  id="uploadForm" enctype="multipart/form-data">
<input type="file" id="config" name="configFile">
<input type="file" id="demand" name="demandFile">
</form> button id="progressBtn" class="btn btn-primary">计算</button> <script>
document.querySelector("#progressBtn") = function () {
var formdata = new FormData()
formdata.append("configFile", $("#config")[0].files[0])
formdata.append("demandFile", $("#demand")[0].files[0])
$.ajax({
type: "POST",
url: "/api/computeResult",
data: formdata,
async: false,
contentType: false,
processData: false,
success: function (res) { },
error: function (res) {
}
})
} </script>

注意:

  • form表单提交input的type=file时,form的enctype="multipart/form-data",才能提交file的文件流到后台
  • 必须用FormData对象存储和提交表单中的值
  • FormData的append方法存储表单数据
  • FormData的get方法才可以看到存储到formData中的值,如formdata.get("configFile"),若是formdata.configFile是获取不到值的
  • ajax中async: false

formData和input的file结合使用的更多相关文章

  1. HTML <input type="file">上传文件——结合asp.net的一个文件上传示例

    HTML的代码:(关键是要在form里设置enctype="multipart/form-data",这样才能在提交表单时,将文件以二进制流的形式传输到服务器) 一. <fo ...

  2. html5的FormData对象和input的file属性以及window.URL.createObjectURL( ) 方法(转载)

    /** FormData ==>表单数据 能自动把表单数据拼接打包 当ajax发送数据时,发送打包的数据; 还可以使用FormData对象的append(key,value)添加数据 FormD ...

  3. input type='file'上传控件假样式

    采用bootstrap框架样式 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> &l ...

  4. <input type="file">上传文件并添加路径到数据库

    注:这里是用的mvc所以没法用控件 html代码 <form method="post" enctype="multipart/form-data"> ...

  5. 【原创】js中input type=file的一些问题

    1.介绍 在开发中,文件上传必不可少,input[type=file] 是常用的上传标签,但是它长得又丑.浏览的字样不能换,但是他长得到底有多丑呢.我们来看看在不同浏览器里的样子吧. <inpu ...

  6. input的file 控件及美化

    在一些网站进行上传时,当单击了“浏览”按钮之后会弹出[选择文件]的对话框.想要实现这一功能,用input的file控件来实现就好啦~ <!doctype html> <html la ...

  7. FormData、Blob、File、ArrayBuffer数据类型

    XMLHttpRequest 1.0 1.0 中xmlhttpRequest有2个重要的返回属性,reposeText,reposeXml.下面的数据类型都是2.0新增的 FormData对象 我们应 ...

  8. 关于PHP HTML <input type="file" name="img"/>上传图片,图片大小,宽高,后缀名。

    在我们的系统中,不免要上传图片,视频等文件,在上传中,需要做的一些判断,文件大小等方面. 注意: 在php.ini 中的post_max_size,upload_max_filesize默认为2M,在 ...

  9. 自定义上传按钮 <input type="file" name = "file"/> (将file隐藏在button下)

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

随机推荐

  1. Spring(二)--Spring入门案例

    Spring入门案例 1.需要的实体类 2.需要的接口和实现类 3.需要的service和实现类 /** * service层的作用 * 在不改变dao层代码的前提下,增加业务逻辑操作 */ publ ...

  2. [BZOJ2144][国家集训队2011]跳跳棋

    题目描述 跳跳棋是在一条数轴上进行的.棋子只能摆在整点上. 每个点不能摆超过一个棋子. 我们用跳跳棋来做一个简单的游戏:棋盘上有3颗棋子,分别在\(a\),\(b\),\(c\)这三个位置. 我们要通 ...

  3. C++中多态的概念和意义

    1,函数重写回顾: 1,父类中被重写的函数依然会继承给子类: 2,子类中重写的函数将覆盖父类中的函数: 1,重写父类当中提供的函数是因为父类当中提供的这个函数版本不能满足我们的需求,因此我们要重写: ...

  4. PythonWeb框架Django搭建过程

    首先下载PyCharm专业版 破解地址:https://www.52pojie.cn/thread-997094-1-1.html 之后创建python虚拟环境(创建虚拟环境在上一篇博客) 激活虚拟环 ...

  5. SparkML之推荐算法ALS

    参考: SparkML之推荐算法(一)ALS --有个比较详细的讲解,包含blocks使用. Spark ALS源码总结 //TODO 源码,集群尝试.研究blocks使用原理及作用. 官方解释:nu ...

  6. Python time strptime()方法 时间操作

    描述 Python time strptime() 函数根据指定的格式把一个时间字符串解析为时间元组. 语法 strptime()方法语法: time.strptime(string[, format ...

  7. uoj218_火车管理

    题意 \(n\)个位置,每个位置一个栈,三种操作,询问区间栈顶的和,区间入栈某个数,单点出栈某个数. 分析 用一个线段树来维护栈顶的和,区间(单点)更新和区间询问. 用一个主席树来维护每个位置最新一次 ...

  8. 09.AutoMapper 之自定义类型转换器(Custom Type Converters)

    https://www.jianshu.com/p/47054d92db2a 自定义类型转换器(Custom Type Converters) 有时需要完全控制一种类型到另一种类型的转换.这一般发生在 ...

  9. qt对plot柱状图颜色设置

      当使用qwtplotbarchart来使用柱状图时.可以通过下面代码来设置柱状图的颜色 QwtPlotBarChart  *barChart = new QwtPlotBarChart(" ...

  10. AIX中crontab和at 定时任务

    1.crontab crontab文件用于在指定日期和时间周期性地执行作业 crontab 作业存放在/var/spool/cron/crontabs/$USER cron根据crontab文件项运行 ...