Jquery должен позаботиться о проблемах с кросс-браузерными и более старыми браузерами.
Это работает на современных браузерах, которые я тестировал: Chromium v25, Firefox v20, Opera v12.14
Использование jquery 1.9.1
HTML
<input id="fileopen" type="file" value="" />
<button id="clear">Clear</button>
Jquery
$("#clear").click(function () {
$("#fileopen").val("");
});
Вкл. jsfiddle
Следующее решение javascript также работает для меня в браузерах, упомянутых выше.
document.getElementById("clear").addEventListener("click", function () {
document.getElementById("fileopen").value = "";
}, false);
Вкл. jsfiddle
У меня нет способа проверить с IE, но теоретически это должно работать. Если IE отличается настолько, что версия Javascript не работает, потому что MS сделала это по-другому, метод jquery должен, на мой взгляд, решить эту проблему за вас, иначе стоило бы указать это команде jquery вместе с метод, который требуется IE. (Я вижу людей, которые говорят «это не сработает в IE», но нет ванильного javascript, чтобы показать, как он работает в IE (предположительно, «функция безопасности»?)), Возможно, сообщите об этом также как об ошибке в MS (если они считать его таковым), чтобы он исправлялся в любом новом выпуске)
Как упоминалось в другом ответе, пост на jquery форуме
if ($.browser.msie) {
$('#file').replaceWith($('#file').clone());
} else {
$('#file').val('');
}
Но jquery теперь удалил поддержку тестирования браузера, jquery.browser.
Это решение javascript также сработало для меня, оно является ванильным эквивалентом метода jquery.replaceWith .
document.getElementById("clear").addEventListener("click", function () {
var fileopen = document.getElementById("fileopen"),
clone = fileopen.cloneNode(true);
fileopen.parentNode.replaceChild(clone, fileopen);
}, false);
Вкл. jsfiddle
Важно отметить, что метод cloneNode не сохраняет связанные обработчики событий.
См. Этот пример.
document.getElementById("fileopen").addEventListener("change", function () {
alert("change");
}, false);
document.getElementById("clear").addEventListener("click", function () {
var fileopen = document.getElementById("fileopen"),
clone = fileopen.cloneNode(true);
fileopen.parentNode.replaceChild(clone, fileopen);
}, false);
Вкл. jsfiddle
Но jquery.clone предлагает это [* 1]
$("#fileopen").change(function () {
alert("change");
});
$("#clear").click(function () {
var fileopen = $("#fileopen"),
clone = fileopen.clone(true);
fileopen.replaceWith(clone);
});
Вкл. jsfiddle
[* 1] jquery может сделать это, если события были добавлены методами jquery, поскольку он хранит копию в jquery.data , иначе он не работает, поэтому это что-то вроде читерства / обходного пути и означает, что вещи не совместимы между различными методами или библиотеками.
document.getElementById("fileopen").addEventListener("change", function () {
alert("change");
}, false);
$("#clear").click(function () {
var fileopen = $("#fileopen"),
clone = fileopen.clone(true);
fileopen.replaceWith(clone);
});
Вкл. jsfiddle
Вы не можете получить прикрепленный обработчик событий непосредственно от самого элемента.
Вот общий принцип в vanilla javascript, это то, как jquery делают все остальные библиотеки (примерно).
(function () {
var listeners = [];
function getListeners(node) {
var length = listeners.length,
i = 0,
result = [],
listener;
while (i < length) {
listener = listeners[i];
if (listener.node === node) {
result.push(listener);
}
i += 1;
}
return result;
}
function addEventListener(node, type, handler) {
listeners.push({
"node": node,
"type": type,
"handler": handler
});
node.addEventListener(type, handler, false);
}
function cloneNode(node, deep, withEvents) {
var clone = node.cloneNode(deep),
attached,
length,
evt,
i = 0;
if (withEvents) {
attached = getListeners(node);
if (attached) {
length = attached.length;
while (i < length) {
evt = attached[i];
addEventListener(clone, evt.type, evt.handler);
i += 1;
}
}
}
return clone;
}
addEventListener(document.getElementById("fileopen"), "change", function () {
alert("change");
});
addEventListener(document.getElementById("clear"), "click", function () {
var fileopen = document.getElementById("fileopen"),
clone = cloneNode(fileopen, true, true);
fileopen.parentNode.replaceChild(clone, fileopen);
});
}());
Вкл. jsfiddle
Конечно, jquery и другие библиотеки имеют все другие методы поддержки, необходимые для поддержки такого списка, это просто демонстрация.