jQuery - 在更改时重置文件输入

Question

如果用户附加了不被接受的文件，我正在尝试清除组件。我正在尝试在连接后立即执行此操作。我在这里查看了一些示例，其中一些示例向我展示了如何使用重置按钮来重置整个表单（我不想这样做）或克隆组件（我尝试过但是它不工作）。如果有人可以帮助我，我会很高兴。提前致谢。

这是我所拥有的示例：

$("#mycomponent").on("change", function()
{
    var extension = $(this).val().split(".").pop().toString();

    if((extension === "pdf") || (extension === "docx") || (extension === "doc"))
    {
        alert("OK");    
    }
    else
    {
        alert("File extension not accepted");

        var mycomponent = $("#mycomponent");
        mycomponent.replaceWith(mycomponent = mycomponent.clone(true));
    }
});

Answer 1

Working fiddle.

像下面这样使用wrap()/unwrap()函数应该可以工作：

$(this).wrap('<form>').closest('form').get(0).reset();
$(this).unwrap();

希望这会有所帮助。

$("#mycomponent").on("change", function(){
  var extension = $(this).val().split(".").pop().toString();

  if((extension === "pdf") || (extension === "docx") || (extension === "doc"))
  {
    console.log("OK");    
  }
  else
  {
    console.log("File extension not accepted");
    
    $(this).wrap('<form>').closest('form').get(0).reset();
    $(this).unwrap();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="mycomponent" />

Answer 2

你可以用 val() 清除组件，像这样：

$("#mycomponent").on("change", function()
{
    var extension = $(this).val().split(".").pop().toString();

    if((extension === "pdf") || (extension === "docx") || (extension === "doc"))
    {
        alert("OK");    
    }
    else
    {
        alert("File extension not accepted");

        var mycomponent = $("#mycomponent");
        mycomponent.val("");
    }
});