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
上一篇:http请求包里面带文件的传输,请求包如何写


下一篇:jQuery获取表单全部数据