如何在 CFDiv 容器中提交 CFInput type=file

Question

我正在 cfdiv 容器中提交文件，但文件的值并未提交到处理页面。如果我在 cfdiv 之外提交文件，它会看到文件值。但是，如果文件位于 cfdiv 或 div 容器内，则表单字段未定义。我也将 enctype="multipart/form-data" 添加到 cfform，但它仍然无法正常工作。

更新：

这是第一页(index.cfm)

<div  name="loadcontainer" id="loadcontainer">
    <cfinclude template="homepage.cfm">
</div>

homepage.cfm

<cfform name="school_create"   id="school_create" 
      action="pro_create_school.cfm"    
      enctype="multipart/form-data"  
      method="post">

    <cfinput size="50" type="file" id="school_logo" name="school_logo">
    <button  type="submit">Save</button>
</cfform>

单击保存按钮时，在操作处理页面中看不到 form.school_logo 值。

我也尝试过使用普通的 form 和 input，而不是 cfform/cfinput，但是表单在提交时被加载到另一个选项卡，而不是 div 容器。

Answer 1

"File" 对于早期 CF 版本中的 CFINPUT 是不正确的 "type"（不确定您使用的是哪个版本）。我确实检查了文档，当前版本允许这样做。

与此同时，将 CFINPUT 更改为：

<input size="50" type="file" id="school_logo" name="school_logo">

或者更好的是，删除 <cfform> - 您不会将它用于任何用途，也不需要它。一个好的 JS 库 (jquery) 将为您提供更好的验证等功能。

在这种情况下，您可以轻松地做到：

<form name="school_create"   id="school_create" 
      action="pro_create_school.cfm"    
      enctype="multipart/form-data"  
      method="post">

    <input size="50" type="file" id="school_logo" name="school_logo">

    <button  type="submit">Save</button>
</form>

它会按预期工作。 Cfform 旨在以原生 CF 时尚提供简单的验证功能，但在解释 CFML 的教程和书籍之外几乎没有人使用它。当我们看到它在 CF Webtools 中使用时，我们会尽快重构它。

Answer 2

我能够提交 <cfinput type="file"..../> 和 ajax 表单中的其他表单字段。

<script>
                        function validateForm() {
                            var x = document.forms["add_academic_year"]["start_year"].value;
                            var y = document.forms["add_academic_year"]["end_year"].value;
                            if (x == null || x == "" || y == null || y == "") {
                                alert("Start Year and End Year Must be Selected");
                                return false;
                            }
                            if (y <= x) {
                                alert("End Year must be greater than Start Year ");
                                return false;
                            }

            console.log("submit event");
            var fd = new FormData(document.getElementById("add_academic_year"));
            $.ajax({
              url: "pro_academic_year.cfm",
              type: "POST",
              data: fd,
              enctype: 'multipart/form-data',
              processData: false,  // tell jQuery not to process the data
              contentType: false   // tell jQuery not to set contentType
            }).done(function( response ) {
                // display response in DIV
                $("#loadcontainer").html( response.toString());
            })
           .fail(function(jqXHR, textStatus, errorMessage) {
                // display error in DIV
                $("#outputf").html(errorMessage);
            })            
            return false;

                        }
                        </script>

如何在 CFDiv 容器中提交 CFInput type=file

How to submit a CFInput type=file within a CFDiv container

coldfusion

cfform