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