在选择更改时使用 JQuery 选择文件后清除文件输入字段答案

【问题标题】：Clear file input field after file selected using JQuery on select change在选择更改时使用 JQuery 选择文件后清除文件输入字段
【发布时间】：2016-11-10 04:47:14
【问题描述】：

使用来自 http://www.appelsiini.net/projects/filestyle 的名为 filestyle 的 Jquery 插件。我有一个 id 为 adtype 的选择框。如果所选选项的值为 7，它将禁用 id 为 'adfile' 的文件输入。

当用户已经选择了一个文件时，问题就出现了。我找不到清除文件输入然后禁用它的方法。 $('#adfile').val('');不工作。

JQUERY

$(function(){
  $('#adtype').change(function(){
    if($('#adtype option:selected').val()==="7"){
      $('#adfile').val('');
      $("#adfile").prop('disabled', true);
    }else{
      $("#adfile").prop('disabled', false);
    }
  });
});

HTML

<form id="someform" action="somepage" method="post">
  <select name="selectstuff" id="adtype">
    <option value="1">one</option>
    <option value="5">five</option>
    <option value="7">seven</option>
  </select>

  <input type="file" id="adfile" value="" />

  <input type="submit" value="submit" />
</form>

【问题讨论】：

标签： jquery html forms

【解决方案1】：

我用过 $('#adfile').val(''); 和 $('#adfile').attr('disabled', 'disabled');

DEMO

注意：filestyle 插件从文件输入元素中删除了id,name 属性，并将file 添加为类。我正在参考表单访问此元素。

希望对你有帮助

【讨论】：

我接受您的回答，尽管它在我的页面上不起作用。我相信来自appelsiini.net/projects/filestyle 的文件样式插件正在干扰清除文件输入字段。如果我删除文件样式插件，我可以清除该字段。谢谢。
你应该在你的问题中提到这一点，你可以得到更准确的答案
谢谢你，我想通了。将 .file 类值设置为 "" 并禁用文件输入 id adfile" $('#addaduploadform .file').val(''); $('#adfile').attr('disabled', 'disabled' );

【解决方案2】：

$(":file").filestyle('clear');

【讨论】：

【解决方案3】：

<html>
<head>

<script type="text/javascript">
$(document).ready(function(){
    $('#adtype').change(function(){
        if($('#adtype option:selected').val()==="7"){
            $('#adfile').remove();
            $('#file_div').html('<input type="file" id="adfile" value="" />')
            $("#adfile").prop('disabled', true);
        }else{
            $("#adfile").prop('disabled', false);
        }
    });
});

</script>
</head>

<body>
    <div id="signup">
        <form id="someform" action="somepage" method="post">
       <select name="selectstuff" id="adtype">
<option value="1">one</option>
<option value="5">five</option>
<option value="7">seven</option>
</select>
        <div id="file_div">
         <input type="file" id="adfile" value="" />

        </div>

        <input type="submit" value="submit" />
        </form>

    </div>

</body>

</html>

【讨论】：

我昨天尝试了这种技术。不会工作。我将把它归结为干扰其他 JQuery 的文件样式插件。感谢您的努力
我已经在 ie 和所有其他浏览器中检查了它。它工作正常，只需在此代码中添加 jquery.js 并测试。

【解决方案4】：

这对我有用。

$("#Elementid").val(null);

【讨论】：