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