Question

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

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

表单已正确编码（enctype="multipart/form-data"）
我在使用＆＃39;浏览时返回一个值并从我的本地文件系统中选择一个图像（例如$('#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)

空

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

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

Answer 1

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

之外

<form></form>

并未提交。可能有一种更技术性的方法来使用DOM语言来编写它，但基本上问题是格式良好（或不适当）的HTML。

此处没有PHP问题，并且首先没有提交该字段。谢谢Chetan。

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

1 个答案: