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的“类型”错误（不确定您使用的是哪个版本）。我确实检查了文档，并且在当前版本中允许使用。

同时，改为将CFINPUT改为：

<cfform>

或者更好的是，摆脱<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> - 你没有使用它，你不需要它。一个好的JS库（jquery）将为您提供更好的验证功能等。

在这种情况下，你可以很容易地做到：

RouterModule

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

Answer 2

我能够使用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>

如何在CFDiv容器中提交CFInput类型=文件

2 个答案: