清除按鈕，輸入文件名點擊

Question

參見上圖中，如何清除「Koala.jpg」文件名，每次當用戶點擊刪除按鈕，自舉模式中的時間。

$('#delImg').on({ 
 
    click: function() { 
 
    $('#fileupload').attr("value", ""); 
 
    $('#fileupload').attr("src", ""); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div class="modal-body"> 
 
    <div class="box-body"> 
 
    <form method="post" action="#"> 
 
     <div> 
 
     <textarea id="" ng-model="" style="" class="textarea" placeholder="Post something"></textarea> 
 
     </div> 
 
    </form> 
 
    </div> 
 
    <div class="form-group"> 
 
    <label for="exampleInputFile">File input</label> 
 
    <input type="file" id="exampleInputFile"> 
 
    <div id="imgdispy"></div> 
 
    <p class="help-block">Example block-level help text here.</p> 
 
    </div> 
 
</div> 
 
<button type="button" id="delImg" class="btn btn-default btn-hover-green" data-action="save" data-dismiss="modal" role="button">Delete</button> 
 
</div>

上面的代碼是不工作

一些谷歌搜索後，清除緩存可以解決的，但需要理解的語法和真正原因的幫助。

Answer 1

您可以用其克隆替換文件輸入;

$('body #exampleInputFile').replaceWith($('body #exampleInputFile').val('').clone(true)); 

這裏是工作的代碼

$('#delImg').on('click', function() { 
 
    // $('#fileupload').attr("value", ""); 
 
    // $('#fileupload').attr("src", ""); 
 
    
 
    $('body #exampleInputFile').replaceWith($('body #exampleInputFile').val('').clone(true)); 
 

 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div class="modal-body"> 
 
    <div class="box-body"> 
 
    <form method="post" action="#"> 
 
     <div> 
 
     <textarea id="" ng-model="" style="" class="textarea" placeholder="Post something"></textarea> 
 
     </div> 
 
    </form> 
 
    </div> 
 
    <div class="form-group"> 
 
    <label for="exampleInputFile">File input</label> 
 
    <input type="file" id="exampleInputFile"> 
 
    <div id="imgdispy"></div> 
 
    <p class="help-block">Example block-level help text here.</p> 
 
    </div> 
 
</div> 
 
<button type="button" id="delImg" class="btn btn-default btn-hover-green" data-action="save" data-dismiss="modal" role="button">Delete</button> 
 
</div>