JQueryで選択したファイルの入力をリセットする

Question

選択したファイルを削除するjQueryメソッドを作成する方法はありますか？ファイル名をjQueryに渡してファイル入力をリセットするにはどうすればよいですか？

一度にすべてのファイルを消去したくありません。私のJSで

<div class="field fieldTEXT"> 
    <form:label path="file" cssClass="fieldLabel"> 
    Attach Competitor: 
    </form:label> 

    <form:input path="file" type="file" cssClass="fileInput" accept="application/pdf"/> <a href="" onclick="RemoveFile();" > Remove</a> 
</div> 
     <div class="field fieldTEXT"> 
      <form:label path="file2" cssClass="fieldLabel"> 
       Attach 2 
      </form:label> 
      <form:input path="file2" type="file" cssClass="fileInput"/> <a href="" onclick="RemoveFile();" > Remove</a> 

     </div> 
     <div class="field fieldTEXT"> 
      <form:label path="file3" cssClass="fieldLabel"> 
       Attach Additional Information: 
      </form:label> 
      <form:input path="file3" type="file" cssClass="fileInput" accept="application/pdf"/> <a href="" onclick="RemoveFile();" > Remove</a>  
     </div> 
     <div class="field fieldTEXT"> 
      <form:label path="file4" cssClass="fieldLabel"> 
       Attach Additional Information (If Needed): 
      </form:label> 
       <form:input path="file4" type="file" cssClass="fileInput" accept="application/pdf" /> <a href="" onclick="RemoveFile();" > Remove</a> 

     </div> 

：

は、ここに私のファイルです はどのように私は私のJSファイルに名前を渡すと、選択したリンクをリセットすることができますか？

function RemoveFile(name) { 
    $('input[type=file]').val(''); 
} 

Answer 1

このコードは動作します.HTMLに加えた変更を無視してください。これはエディタでHTMLを生成するためのものです。

説明：あなたが呼び出されますクラスfield fieldTEXT機能をフォーム内のすべてのaタグにイベントハンドラを追加した場合、イベントが私たちに基本的にクリックされた要素であるthisを提供します。そして、jqueryの機能prev()を使用して、私はその後、我々はval('')

$('.field.fieldTEXT a').on('click', function(){ 
 
    $(this).prev().val(''); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="field fieldTEXT"> 
 
      <form:label path="file2" cssClass="fieldLabel"> 
 
       Attach 2 
 
      </form:label> 
 
      <input path="file2" type="file" cssClass="fileInput"/> <a href="#"> Remove</a> 
 

 
     </div> 
 
     <div class="field fieldTEXT"> 
 
      <form:label path="file3" cssClass="fieldLabel"> 
 
       Attach Additional Information: 
 
      </form:label> 
 
      <input path="file3" type="file" cssClass="fileInput" accept="application/pdf"/> <a href="#"> Remove</a>  
 
     </div> 
 
     <div class="field fieldTEXT"> 
 
      <form:label path="file4" cssClass="fieldLabel"> 
 
       Attach Additional Information (If Needed): 
 
      </form:label> 
 
       <input path="file4" type="file" cssClass="fileInput" accept="application/pdf" /> <a href="#" > Remove</a> 
 

 
     </div>

Answer 2

すべての要素を取得し、各オブジェクトにファイルがあるかどうかを確認します。ファイルが存在するかどうかを確認してください。