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

Question

我在cfdiv容器中提交了一个文件，但是该文件的值没有提交到处理页面。如果我在cfdiv之外提交文件，它会看到文件值。但是，如果文件位于cfdiv或div容器内，则表单字段未定义。我还将enctype="multipart/form-data"添加到cfform中，但它仍然不起作用。

更新：

这是第一页(index.cfm)

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

The 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

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

<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>

Answer 2

在早期的CF版本中，对于CFINPUT来说，"File“是一个不正确的”类型“(不确定您使用的是哪个版本)。我确实检查了文档，并且在当前版本中是允许的。

同时，将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的教程和书籍之外，几乎没有人使用它。当我们看到在这里使用它时，我们会尽快地重构它。