<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. start-all.sh启动HDFS,datanode没有启动

    第一次格式化dfs后,启动并使用hadoop,之后如果再次重新执行了格式化(hdfs namenode -format) start-all.sh启动时就会遇到datanode无法启动的问题,通常情况 ...

  2. java 集合 队列(Queue)

    特点:特殊线性表,先进先出(FIFO first-in-first-out) 方法: java5中 添加java.util.Queue接口,java.util.Collection 的扩展类 add( ...

  3. Nginx与PHP如何协同工作

    要说Nginx与PHP如何协同工作,首先得说CGI和FastCGI两个协议. CGI是Web Server与后台语言交互的协议,有了这个协议,开发者可以使用任何语言处理Web Server发来的请求, ...

  4. 解决 find: 路径必须在表达式之前:

    通配符前面加\ 转义 或者 换个目录操作

  5. 一个常用的通过curl发送HTTP请求的函数

    function: function curl_get($url, $params) { return curl_http($url, $params, 'GET'); } function curl ...

  6. EditPlus配置Java编译器

    一.环境说明 系统: windows 7 64位 editplus version:  4.3 二.设置步骤 打开工具中的配置用户工具: 找到用户工具User tools,点击组名Group Name ...

  7. 11.css3动画--自定义关键帧动画--@keyframes/animation

    @keyframes设定动画规则,可以理解为动画的剧本. Name.自定义一个动画名称. 0-100%/from...to.... 需要变化的css样式属性. animation所有动画属性的简写.( ...

  8. Vmware 安装 ghost 版 win 7

    很早就弄过vmware,很可惜一直没有仔细研究过,这次要安装一个win7系统,重新又学一下了一下,下面说一下安装的操作步骤吧. 第一步,下载vmware,原版的下载地址就不说了,上传到百度网盘自己下载 ...

  9. Windows Server IIS设置计划任务重启

    Windows Server ,IIS设置计划任务重启. echo ----->>c:\log_iisreset.txt &&  echo %date% %time% &g ...

  10. java面试(Web相关)06

    1.JSP 和 servlet 有什么区别? JSP 是 servlet 技术的扩展,本质上就是 servlet 的简易方式.servlet 和 JSP 最主要的不同点在于,servlet 的应用逻辑 ...