是否有可能清除<input type='file' />控件值与jQuery?我试过以下几种方法:
$('#control').attr({ value: '' });
但这并不奏效。
是否有可能清除<input type='file' />控件值与jQuery?我试过以下几种方法:
$('#control').attr({ value: '' });
但这并不奏效。
当前回答
将其设置为异步的,并在完成按钮所需的操作后重置它。
<!-- Html Markup --->
<input id="btn" type="file" value="Button" onchange="function()" />
<script>
//Function
function function(e) {
//input your coding here
//Reset
var controlInput = $("#btn");
controlInput.replaceWith(controlInput = controlInput.val('').clone(true));
}
</script>
其他回答
我一直在寻找简单而干净的方法来清除HTML文件输入,上面的答案是伟大的,但没有一个真正回答我在寻找什么,直到我在网络上遇到了一个简单而优雅的方法来做到这一点:
var $input = $("#control");
$input.replaceWith($input.val('').clone(true));
这一切都要归功于克里斯·科伊尔。
// Referneces var control = $("#control"), clearBn = $("#clear"); // Setup the clear functionality clearBn.on("click", function(){ control.replaceWith( control.val('').clone( true ) ); }); // Some bound handlers to preserve when cloning control.on({ change: function(){ console.log( "Changed" ) }, focus: function(){ console.log( "Focus" ) } }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="file" id="control"> <br><br> <a href="#" id="clear">Clear</a>
$("#control").val(")就是你所需要的!使用JQuery 1.11在Chrome上测试
其他用户也在Firefox中进行了测试。
你可以像这样用它的克隆来替换它
var clone = $('#control').clone();
$('#control').replacewith(clone);
但这个克隆与它的价值太,所以你最好喜欢这样
var emtyValue = $('#control').val('');
var clone = emptyValue.clone();
$('#control').replacewith(clone);
我使用了https://github.com/malsup/form/blob/master/jquery.form.js,它有一个名为clearInputs()的函数,它是跨浏览器的,经过良好测试,易于使用,并在需要时处理IE问题和隐藏字段清除。也许这个解决方案有点长,只清除文件输入,但如果你正在处理跨浏览器的文件上传,那么这个解决方案是推荐的。
用法简单:
// Clear all file fields: $("input:file").clearInputs(); // Clear also hidden fields: $("input:file").clearInputs(true); // Clear specific fields: $("#myfilefield1,#myfilefield2").clearInputs();
/** * Clears the selected form elements. */ $.fn.clearFields = $.fn.clearInputs = function(includeHidden) { var re = /^(?:color|date|datetime|email|month|number|password|range|search|tel|text|time|url|week)$/i; // 'hidden' is not in this list return this.each(function() { var t = this.type, tag = this.tagName.toLowerCase(); if (re.test(t) || tag == 'textarea') { this.value = ''; } else if (t == 'checkbox' || t == 'radio') { this.checked = false; } else if (tag == 'select') { this.selectedIndex = -1; } else if (t == "file") { if (/MSIE/.test(navigator.userAgent)) { $(this).replaceWith($(this).clone(true)); } else { $(this).val(''); } } else if (includeHidden) { // includeHidden can be the value true, or it can be a selector string // indicating a special test; for example: // $('#myForm').clearForm('.special:hidden') // the above would clean hidden inputs that have the class of 'special' if ( (includeHidden === true && /hidden/.test(t)) || (typeof includeHidden == 'string' && $(this).is(includeHidden)) ) this.value = ''; } }); };
简单回答:换掉它。
在下面的代码中,我使用replaceWith jQuery方法将控件替换为其本身的克隆。如果您将任何处理程序绑定到此控件上的事件,我们也希望保留这些处理程序。为此,我们传入true作为clone方法的第一个参数。
<input type="file" id="control"/>
<button id="clear">Clear</button>
var control = $("#control");
$("#clear").on("click", function () {
control.replaceWith( control = control.clone( true ) );
});
小提琴:http://jsfiddle.net/jonathansampson/dAQVM/
如果克隆,同时保留事件处理程序,提出了任何问题,您可以考虑使用事件委托来处理父元素对该控件的单击:
$("form").on("focus", "#control", doStuff);
这可以防止在刷新控件时将任何处理程序与元素一起克隆。