选择文件后，无法使用 .hide() 隐藏文件输入的父 div答案

【问题标题】：can't hide parent div of a file input using .hide() after file is selected选择文件后，无法使用 .hide() 隐藏文件输入的父 div
【发布时间】：2012-02-12 03:14:25
【问题描述】：

由于某种原因，jquery 的 .hide() 在选择文件后不会隐藏包含文件输入的 div。当没有选择文件时，我可以运行 js 并隐藏它。请参见下面的示例：

<script type="text/javascript">
function upload_1(ele){

 ele.form.submit();

 $( "#div_1" ).hide('clip', {}, 'fast');
 $( "#waiting_1" ).show('clip', {}, 'fast');
}
</script>
<div id="div_1" class="ajaxVisible" style="float: left;" >
    <form method="post" action="action.php" enctype="multipart/form-data" id="form_1" target="hiddenIFrame1" >
        <input type="file" name="file" size="1" onchange="upload_1(this);" id="image_1" />
    </form>
    </div>
    <iframe style="width:0px;height:0px;border:0px;" name="hiddenIFrame1"></iframe>
    <div id="waiting_1"  style="display: none; float: left;">
<center><img src="abc.gif" height="15px" /></center>
</div>

这是我在没有选择文件时用来测试的代码：

function ajaxHide() {

   $( "#div_1" ).hide('clip', {}, 'fast');
   $( "#waiting_1" ).show('clip', {}, 'fast');
   }

我有一个按钮：

<button onclick="ajaxHide();">Hide</button>

再次，我可以单击上面的按钮进行测试，没有选择文件，div 完美隐藏。当我运行实际用例并选择一个文件时，它不会在选择一个文件后将其隐藏，但隐藏的等待 div 会按应有的方式显示。

感谢您的帮助！

【问题讨论】：

这样的意大利面条代码很难分辨，但看起来你在 div 隐藏之前提交了表单。
哈哈，对不起...我从一个更大的文件中破解了它。我已经尝试了两种方法，在提交事件之前和之后都有隐藏。没什么……
如果文件更大，那就更糟了……
嗯...不知道到底发生了什么。如果您使用 jQuery，为什么不尝试正确使用它，摆脱那些内联样式，如果它仍然不起作用，请返回。你可能会得到更多的人来帮助你。

标签： javascript jquery html jquery-ui

【解决方案1】：

我用你的代码玩了一下，发现了以下问题：

upload_1 中的代码可能无法正常工作（我的意思是这里可能是无限循环，因为一旦代码试图隐藏 div，它就会导致 onchange 再次被触发）

从上传处理程序中删除此代码后，一切正常：

$("#div_1").hide('clip', {}, 'fast');
$("#waiting_1").show('clip', {}, 'fast');

【讨论】：