ファイル入力を空に戻すボタンを設定する方法

Question

function insertQuestion(form) { 

    var $tbody = $('#qandatbl > tbody'); 
    var $tr = $("<tr class='optionAndAnswer' align='center'></tr>"); 
var $image = $("<td class='image'></td>"); 


$weight.append($weightText); 

     }); 

       var $imagefile = $('<input />') 
      .attr({ 
       type: 'file', 
       name: 'imageFile', 
       class: 'imageFile' 
      }); 

      $image.append($imagefile); 

       var $imageclear = $('<input />') 
      .attr({ 
       type: 'button', 
       name: 'imageClear', 
       class: 'imageClear', 
       value: 'Clear File' 
      }); 

$tr.append($image); 
$tbody.append($tr); 

} 

ファイル入力とボタンがあります。私の質問は、ユーザーがボタンをクリックすると、ファイル入力からユーザーが既に選択したファイルURLを削除して、ファイル入力が空白に戻るように、ボタンを設定したいということです、 これどうやってするの？

Answer 1

clickeventをbuttonにバインドすると、実際にはファイル入力要素が新しいものに置き換えられます。

$('<input />') 
    .attr({ 
     type: 'button', 
     name: 'imageClear', 
     class: 'imageClear', 
     value: 'Clear File' 
    }).click(function(){ 
     $('#fileInputId').replaceWith('<input type="file" id="fileInputId" class="imageFile" name="imageFile" />'); 
    }); 

Answer 2

編集：申し訳ありませんが、私はヒット早すぎる提出します。

divまたはspanにファイル入力をラップし、そのコンテナのHTMLをコンテナのHTMLでリセットします。私はより一般的な（プラグインに置くことができる）ので、私はこのメソッドを好むし、私はJavaScriptで入力HTMLを再指定する必要はありません。

http://jsfiddle.net/nm4rV/

<span class="inputFile-wrap"><input type="file" class="inputFile" /></span> 

<button type="button">Reset</button> 

$(function() { 
    $('button').click(function() { 
     $('.inputFile-wrap').html($('.inputFile-wrap').html()); 
    }); 
}); 

Answer 3

これは、あなたが欲しいものを行う必要があります。

$('.imageClear').click(function() { 
    $('.imageFile').val(''); 
});