formData和input的file结合使用
<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结合使用的更多相关文章
- HTML <input type="file">上传文件——结合asp.net的一个文件上传示例
HTML的代码:(关键是要在form里设置enctype="multipart/form-data",这样才能在提交表单时,将文件以二进制流的形式传输到服务器) 一. <fo ...
- html5的FormData对象和input的file属性以及window.URL.createObjectURL( ) 方法(转载)
/** FormData ==>表单数据 能自动把表单数据拼接打包 当ajax发送数据时,发送打包的数据; 还可以使用FormData对象的append(key,value)添加数据 FormD ...
- input type='file'上传控件假样式
采用bootstrap框架样式 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> &l ...
- <input type="file">上传文件并添加路径到数据库
注:这里是用的mvc所以没法用控件 html代码 <form method="post" enctype="multipart/form-data"> ...
- 【原创】js中input type=file的一些问题
1.介绍 在开发中,文件上传必不可少,input[type=file] 是常用的上传标签,但是它长得又丑.浏览的字样不能换,但是他长得到底有多丑呢.我们来看看在不同浏览器里的样子吧. <inpu ...
- input的file 控件及美化
在一些网站进行上传时,当单击了“浏览”按钮之后会弹出[选择文件]的对话框.想要实现这一功能,用input的file控件来实现就好啦~ <!doctype html> <html la ...
- FormData、Blob、File、ArrayBuffer数据类型
XMLHttpRequest 1.0 1.0 中xmlhttpRequest有2个重要的返回属性,reposeText,reposeXml.下面的数据类型都是2.0新增的 FormData对象 我们应 ...
- 关于PHP HTML <input type="file" name="img"/>上传图片,图片大小,宽高,后缀名。
在我们的系统中,不免要上传图片,视频等文件,在上传中,需要做的一些判断,文件大小等方面. 注意: 在php.ini 中的post_max_size,upload_max_filesize默认为2M,在 ...
- 自定义上传按钮 <input type="file" name = "file"/> (将file隐藏在button下)
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
随机推荐
- MySql数据库优化-汇总
各位,不喜勿喷,和气生财- 数据库优化,是一种综合性的技术,不是通过某一种方式让数据库效率提高很多,而是通过各个方面的优化,来是数据库效率明显的稳步的提高. 主要包括以下: 1.库表的设计优化(三种范 ...
- java_第一年_JDBC(1)
JDBC(Java Data Base Connectivity),用于实现java语言编程与数据库连接的API. 数据库驱动:应用程序并不能直接使用数据库,而需要通过相应的数据库驱动程序后再操作数据 ...
- Java static基本认知
一. static的用途 在Java编程思想中有这么一句话:“static方法就是没有this的方法.在static方法内部不能调用非静态方法,反过来是可以的.而且可以在没有创建任何对象的前提下,仅仅 ...
- java实现稀疏数组压缩
package sparseArray; public class SparseArray { public static void main(String[] args) { // TODO Aut ...
- C++中多态的概念和意义
1,函数重写回顾: 1,父类中被重写的函数依然会继承给子类: 2,子类中重写的函数将覆盖父类中的函数: 1,重写父类当中提供的函数是因为父类当中提供的这个函数版本不能满足我们的需求,因此我们要重写: ...
- 曹工说Spring Boot源码(5)-- 怎么从properties文件读取bean
写在前面的话 相关背景及资源: 曹工说Spring Boot源码(1)-- Bean Definition到底是什么,附spring思维导图分享 曹工说Spring Boot源码(2)-- Bean ...
- centos7配置mysql8.0主从复制
注意:1.主库:10.1.131.75,从库:10.1.131.762.server-id必须是纯数字,并且主从两个server-id在局域网内要唯一. [主节点]vi /etc/my.cnf[mys ...
- ES6 环境的搭建
安装babel npm install --g babel-cli 在项目目录下输入 npm init -y 会自动创建package.json文件 babel src/index.js -o dis ...
- CNN与图像高级应用
一.图像识别与定位 思路1:视作回归 4个数字,用L2 loss/欧氏距离损失(x,y,w,h)这四个数都是连续值 思路2:借助图像窗口 二.物体识别 0.图像识别与定位: (1)Classifica ...
- 获取url中参数值
function GetRequest() {var url = window.location.href; //获取url中"?"符后的字串var theRequest = ne ...