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(""); 
    } 
});