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 MediumBlob——MySql的Bolb四种类型
MySQL中,BLOB是一个二进制大型对象,是一个可以存储大量数据的容器,它能容纳不同大小的数据.BLOB类型实际是个类型系列(TinyBlob.Blob.MediumBlob.LongBlob),除 ...
- WordPress 在Ubuntu下安装插件、主题输入FTP后无法创建目录
最近自己在搞基于lnmp+wordpress的个人博客, 一切都就绪后,想改变下自己的主题,然后去Wordpress里面内置的主题安装下载的时候,提示:无法创建目录! 一般我们在Ubuntu系统上面安 ...
- [UER #1] DZY Loves Graph
题目描述 开始有 \(n\) 个点,现在对这 \(n\) 个点进行了 \(m\) 次操作,对于第 \(i\) 个操作(从 \(1\) 开始编号)有可能的三种情况: \(Add\) a b: 表示在 \ ...
- C语言---程序的一般形式、数据类型、常量变量、运算符、表达式、格式化输入输出
1. 程序的一般形式 (1)注释 ① 分类:单行注释( // ): 注释一行.多行注释( /**/ ): 在这个区间内,都属于多行注释,可以换行. ② 作用:提示代码的作用,提示思路 不写注释的后 ...
- redis 小结三-数据类型
redis 的数据类型主要有五种 字符串(String) 哈希表(Hash) 列表(List) 集合(Set ) 有序集合(Sorted Set) 1. 字符串 一个 key 对应一个 value 该 ...
- 04、DAT图像文件
DAT是芯片的原始扫描图像,如下图: 注:这两张图来自<Bayesian Inference for Gene Expression and Proteomics>.A是U95Av2芯片的 ...
- 9.jQuery之简洁版滑动下拉菜单
知识点:hover的使用,已经slideToggle的切换效果 <style> * { margin: 0; padding: 0; } li { list-style-type: non ...
- kafka复习(1)
一:flume复习 0.JMS(java message service )java消息服务 ----------------------------------------------------- ...
- js 计算倒计时
第一个是我自己写的 // t等于时间戳差 function changeTime(t) { let timeStr = '' let tmp = t/(24* 3600 * 1000) if (tmp ...
- 剑指offer-1:旋转数组的最小数字
旋转数组的最小数字1.题目描述 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转. 输入一个非减排序的数组的一个旋转,输出旋转数组的最小元素. 例如数组{3,4,5,1,2}为{1,2 ...