ファイルアップロードフィールドのみをクリアするには？

Question

JSfiddleは次のとおりです。http://jsfiddle.net/buyC9/128/

クリアするとファイルのアップロードフィールドのみを消去します。

マイHTML：

<h1>Upload image:</h1> 
<input type="file" name="blog[opload]" id="blog_opload" class="imagec"> 
<input type="url" size="50" name="blog[url]" id="blog_url" class="imagec"> 
<div id="preview"> 
</div> 

私のjQuery：あなたのコードで

$('input').change(function() { 
    var el = $(this); 
    if (this.value === "") { 
     $('.imagec').prop('disabled', false); 
     this.disabled = false; 
     $('#preview').hide(); 
    } else { 
     $('.imagec').prop('disabled', true); 
     el.prop('disabled', false); 
     alert(el.val()); 
     if (el.attr('type') == 'url') { 
      $('#preview').show().html('<img src=' + '"' + el.val() + '"' + ' />'); 
     } 
    } 
}); 

function reset_html(id) { 
    $('.' + id).html($('.' + id).html()); 
} 

var imagec_index = 0; 
    $('input[type=file]').each(function() { 
    imagec_index++; 
    $(this).wrap('<div id="imagec_' + imagec_index + '"></div>'); 
    $(this).after('<input type="button" value="Clear" onclick="reset_html(\'imagec_' + imagec_index + '\')" />'); 
}); 

Answer 1

Quick answer is replace it:

$("#clear").click(function(event){ 
    event.preventDefault(); 
    $("#control").replaceWith("<input type='file' id='control' />"); 
}); 

<input type="file" id="control" /> 
<a href="#" id="clear">Clear</a> 

Answer 2

あなたはIDセレクタを使用するためのものではなく、クラスセレクタを使用しています。

$('.' + id).html($('.' + id).html()); 

でなければなりません

$('#' + id).html($('#' + id).html()); 

Updated jsFiddle

Answer 3

方法について：

$('input[value="Clear"]').click(function(){ 
    $('#blog_opload').val(''); 
}); 

例：jsFiddle

これを使用すると、onclick="reset_html(\'imagec_' + imagec_index + '\')"も取り除くことができます。

Answer 4

あなたは、単にあなたがそのためのプラグインを使用していないのはなぜ

$("#filuploadId")[0].value = "";