<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