代码片段 → jQuery代码片段 → 清空文件输入

清空文件输入

Avatar of Chris Coyier
Chris Coyier 于

您可以克隆它并用自身替换它，所有事件仍然附加。

var input = $("#control");

function something_happens() {
    input.replaceWith(input.val('').clone(true));
};


      


      
    


  







  

          

  

		嘘！ 创建一个DigitalOcean账户并获得$200免费信用额度 用于基于云的托管和服务。







  
    

      评论
    


    
        
    
          
  
  1. 

    
    

      
    
        
    Sreekanth
     
    评论永久链接# 
    
      
    

      
      
    

        
    多次点击“清除”按钮不起作用。
    

      
    

      
    
        
    
          回复        
    
      
    

    
    

    
  

    2. 

  
  2. 

    
    

      
    
        
    Karan Menon
     
    评论永久链接# 
    
      
    

      
      
    

        
    不起作用……
    

      
    

      
    
        
    
          回复        
    
      
    

    
    

    
  

    3. 

  
  3. 

    
    

      
    
        
    Tobias
     
    评论永久链接# 
    
      
    

      
      
    

        
    我这里也是，示例只在第一次有效。
    选择不同的文件会将“已更改”输出到控制台，但点击“清除”链接没有任何反应。
    Win7/Chrome 26
    

      
    

      
    
        
    
          回复        
    
      
    

    
    

    
  

    4. 

  
  4. 

    
    

      
    
        
    dibiler
     
    评论永久链接# 
    
      
    

      
      
    

        
    我相信它不起作用，因为变量“controlBn”只赋值一次（第一次等于$(‘#control’)）。并且由于该元素正在被其新的克隆替换，因此变量“controlBn”在之后可能指向一个不存在的元素。
    我会只使用
    
    $('#clear').on('click' ,function(){
    $('#control').replaceWith( $('#control').val('').clone( true ) );
    
    });
    而不是上面的代码
    （只是猜测）
    

      
    

      
    
        
    
          回复        
    
      
    

    
    

    
  

    5. 

  
  5. 

    
    

      
    
        
    niwtsew
     
    评论永久链接# 
    
      
    

      
      
    

        
    虽然.val(”) 对FF有效，但对IE无效。
    

      
    

      
    
        
    
          回复        
    
      
    

    
    

    
  

      

  
    • 

    
      

      
      
        
      Praveenkumar
       
      评论永久链接# 
      
      
      

      
      
      

        
      .val(”) 在IE11中不起作用。我们可以设置.value = null; 这在IE11中有效吗？
      

      
      

      
      
        
      
                  
      
      
      

    
      

    
  

      • 

    

    6. 

  
  6. 

    
    

      
    
        
    Trevor
     
    评论永久链接# 
    
      
    

      
      
    

        
    谢谢。这正是我需要的。完美地工作；)
    

      
    

      
    
        
    
          回复        
    
      
    

    
    

    
  

    7. 

  
  7. 

    
    

      
    
        
    Jesin
     
    评论永久链接# 
    
      
    

      
      
    

        
    @dibiler 的解决方案非常有效。control 变量必须在 click 回调函数中重新初始化。
    

    clearBn.on("click", function(){
    var control = $("#control");
    control.replaceWith( control.val('').clone( true ) );
});

    

    一个有效的演示可在此处获取 – http://jsfiddle.net/jesin/FEKrz/
    

      
    

      
    
        
    
          回复        
    
      
    

    
    

    
  

    8. 

  
  8. 

    
    

      
    
        
    Pablo
     
    评论永久链接# 
    
      
    

      
      
    

        
    太棒了！
    

      
    

      
    
        
    
          回复        
    
      
    

    
    

    
  

    9. 

  
  9. 

    
    

      
    
        
    Ibrahim Islam
     
    评论永久链接# 
    
      
    

      
      
    

        
    太棒了！
    

      
    

      
    
        
    
          回复        
    
      
    

    
    

    
  

    10. 

  
  10. 

    
    

      
    
        
    ETorres
     
    评论永久链接# 
    
      
    

      
      
    

        
    嘿……太棒了！但对FILE类型不起作用 :-(
    

      
    

      
    
        
    
          回复        
    
      
    

    
    

    
  

    11. 

  
  11. 

    
    

      
    
        
    Muhamad Risman
     
    评论永久链接# 
    
      
    

      
      
    

        
    谢谢，对我很有帮助 :)
    

      
    

      
    
        
    
          回复        
    
      
    

    
    

    
  

    12. 

  
  12. 

    
    

      
    
        
    Qaisar Khan
     
    评论永久链接# 
    
      
    

      
      
    

        
    我看到有人抱怨清除按钮无法多次使用……
    一个更简单的解决方案怎么样，例如
    

    document.getElementById(“control”).value = “”;
    

      
    

      
    
        
    
          回复        
    
      
    

    
    

    
  


    13. 

  
  13. 

    
    

      
    
        
    Stan
     
    评论永久链接# 
    
      
    

      
      
    

        
    @Qiasar = 你真是太厉害了 :)
    

      
    

      
    
        
    
          回复        
    
      
    

    
    

    
  

    14. 

  
  14. 

    
    

      
    
        
    Darbez
     
    评论永久链接# 
    
      
    

      
      
    

        
    $(“#clear”).click(function(){
    $(“#control”).val(”);
    
    });
    

    这是错误的吗 ????
    

      
    

      
    
        
    
          回复        
    
      
    

    
    

    
  

      

  
    • 

    
      

      
      
        
      jeff
       
      评论永久链接# 
      
      
      

      
      
      

        
      @Darbez
      

      等等，你是说
      

      $(“#clear”).click(function(){
    $(“#control”).val(”);
});

      

      是错误的，还是你在提问？
      

      因为我在提问。这样做有什么问题吗？
      

      
      

      
      
        
      
                  
      
      
      

    
      

    
  

      • 

    

    15. 

  
  15. 

    
    

      
    
        
    Maxmaxmaximus
     
    评论永久链接# 
    
      
    

      
      
    

        
    ie-8 支持，尽情享受吧=) 我的名字是Maxmaxmaximus
    

    input.value = ''
input.type = ''
input.type = 'file'

    

      
    

      
    
        
    
          回复        
    
      
    

    
    

    
  

    16. 

  
  16. 

    
    

      
    
        
    lyc4n
     
    评论永久链接# 
    
      
    

      
      
    

        
    清除表单
    

    $(".user-form").get(0).clear()

    

      
    

      
    
        
    
          回复        
    
      
    

    
    

    
  

    17. 

  
  17. 

    
    

      
    
        
    Matic Pogladič
     
    评论永久链接# 
    
      
    

      
      
    

        
    伙计们，这段代码有效
    

    $('#btn-example-file-reset').on('click', function(e){
   var $el = $('#example-file');
   $el.wrap('<form>').closest('form').get(0).reset();
   $el.unwrap();
});

    

      
    

      
    
        
    
          回复        
    
      
    

    
    

    
  

    18. 

  
  18. 

    
    

      
    
        
    Thiru
     
    评论永久链接# 
    
      
    

      
      
    

        
    document.getElementById(“control”).value = “”;
    

      
    

      
    
        
    
          回复        
    
      
    

    
    

    
  

    19. 

  
  19. 

    
    

      
    
        
    Jonn Jasper Ejoc
     
    评论永久链接# 
    
      
    

      
      
    

        
    这对我有用
    

    $(‘#control’).val(”);
    

      
    

      
    
        
    
          回复        
    
      
    

    
    

    
  

    20. 

  
  20. 

    
    

      
    
        
    Arsenii
     
    评论永久链接# 
    
      
    

      
      
    

        
    谢谢！这对我有用！
    

      
    

      
    
        
    
          回复        
    
      
    

    
    

    
  

    21. 

  
  21. 

    
    

      
    
        
    SNikhill
     
    评论永久链接# 
    
      
    

      
      
    

        
    我倾向于通过将 files 属性重置为空 FileList 来重置FileInput。
    

    [inputTypeFile].files = new DataTransfer().files
    

    其中[inputTypeFile] = 类型为文件的HTMLInputElement。
    

      
    

      
    
        
    
          回复        
    
      
    

    
    

    
  

    22. 
        


      
  
  
    


      
        


          	

		
发表评论 
您的电子邮件地址将不会被公开。 必填字段标有 *
 
 



 


 


 


		

			
			
			
		

		

	

	
        


      
    

  

      




  


  

  


		
		
















  






  


  

  
    

      
        
        
        
      

      
        
        
        
          
          
          
          
        
      

    
  

  

  





  

    

      

        © 2024 . All rights reserved.