自定义文件上传 - 删除文件输入字段答案

【问题标题】：Custom File Upload - Removed file input field自定义文件上传 - 删除文件输入字段
【发布时间】：2015-11-10 03:42:40
【问题描述】：

自定义文件上传问题 - 从这里http://codepen.io/wallaceerick/pen/fEdrz

使用此代码成功替换文件浏览器按钮并按预期设置上传样式。问题是在使用它时，代码似乎删除了 INPUT 字段，而在提交表单时 $_FILES 数组为空？

表单编码正确 (enctype="multipart/form-data")
在使用“浏览”并从我的本地文件系统中选择图像时，Id 返回一个值（例如，$('#imageLogo').val() 返回文件名）
当不使用 JS 包装器时，文件输入被正确传递。

使用生成的代码

<script>$('input[type=file]').customFile();</script>


<div class="custom-file-upload">
    <div class="file-upload-wrapper">
       <input type="file" name="logo_file" id="logoImage" class="custom-file-upload-hidden" tabindex="-1" style="position: absolute; left: -9999px;">
        <input type="text" class="file-upload-input" title="a68a4029222401.55e8249a99c6b.jpg">
         <button type="button" class="file-upload-button" tabindex="-1">Select a File</button>
       </div>
   </div>

提交表单时文件元素不可用？ ($_FILES) 输出帖子提交。

array (size=0)

空

因此，似乎代码正在被替换/删除，然后表单不知道文件元素（即使我可以访问原始

当我删除运行此 (//$('input[type=file]').customFile();) 的 JS 调用时，文件现在在提交表单时正确显示...？感谢您提供任何帮助。

【问题讨论】：

标签： jquery html forms file-upload

【解决方案1】：

对此我深表歉意，但解决方案是以正确格式化 HTML 的形式出现的。通过 W3C 验证器运行它后，显示包含的 div 和表单嵌套不正确。所以我的假设是，由于 JS 创建了一个新的输入字段并替换了原始字段，因为页面中的 div 在表单之后结束，因此新元素以某种方式推到了

之外

<form></form>

未提交。使用 DOM 语言可能有一种更具技术性的方式来编写此代码，但基本上问题在于格式良好（或不正确）的 HTML。

这里没有 PHP nessasary，并且该字段一开始就没有被提交。无论如何谢谢Chetan。

【讨论】：