Очистка input type=file через JavaScript и JQuery

Прошу знающих отписатся в теме.

Как можно с помощью JavaScript или JQuery очистить поле input типа type="file".

Казалось бы простой вопрос, а в интернете нет ответа.

Пример, у меня чат на JQuery с прикреплением файлов.
Выбрал файл нажал кнопку и без перезагрузки страницы добавилось сообщение с файлом.

Неужели единственным выходом будет полностью пересоздавать форму после выгрузки файла, иных решений нет?

Данные варианты не подходят

$('#f1').val('');
$('#f1').val(false);
$('#f1').val(undefined);
$('#f1').val(null);
$('#f1').attr('value','');
$('#f1').attr('value',undefined);
$('#f1').attr('value',null);
$('#f1').parent().html($('#f1').parent().html();
document.getElementById('f1').innerHTML = document.getElementById('f1').innerHTML;

Кнопку типа type="reset" тоже не предлагать.

blackvj, Установить значение для инпута с типом file средствами js невозможно из соображений безопасности.
Только генерация нового элемента тут может помочь.

https://github.com/Kilte/Trill ... ls.js

reaper, Вот и я так понял. Значит в нашем случае подойдёт только

пересоздание элемента input type="file" через

append и remove

# reaper (07.01.2015 / 19:18)
blackvj, Установить значение для инпута с типом file средствами js невозможно из соображений безопасности.
Только генерация нового элемента тут может помочь.

Спасибо за функцию, но мне каптча не нужна, ибо использую лимит выгрузки по времени.
А проверку на файл в input делаю через var file= $("#files").val();

Тем самым упрощая код до нескольких строчек

blackvj, Я знаю, что капча не нужна Всего-лишь показал, как решил эту проблему.
Без капчи просто не могу показать, потому что этот код часть движка и лежит в репозитории.

Вообщем простое решение для тех, кто нашёл эту тему с интернета и не знает как с этим быть.

К примеру у Вас есть input type="file" и его нужно очистить после выгрузки без перезагрузки страницы, но он у Вас находится в определённом месте на сайте.

Тогда делаем так:

1. Размещаем в нужном нам месте где будет input невидимый элемент 
echo '<span id="ff"></span>'; ## имя ff взято произвольно

2. При создании DOM создаём наш input в элементе ff
echo '<script language="JavaScript" type="text/javascript">  
$(document).ready(function(){
$("#ff").append(\'<input type="file" id="files" name="upload_file"/><br/>\');
});
</script>';

3. После выполнения выгрузки файла в java-script, (функция которая отправляет через ajax файл, в момент возвращения результата, добавляем в неё эти строчки.)

$("#files").remove(); // Удаляем наш input после выгрузки файла
$("#ff").append(\'<input type="file" id="files" name="upload_file"/><br/>\'); // И создаём новый чистый input

Тем самым пересоздав элемент input type="file" с чистым полем ввода файла.

Это единственный правильный вариант решения этой проблемы. Надеюсь кому-то поможет как и мне.

Обращаю внимание на изменённый name="upload_file" в input! Его вы должны будуте изменить под свой.

Небольшой fix

echo '<div id="ff"></div>';

echo '<script language="JavaScript" type="text/javascript">  
$(document).ready(function(){
$("#ff").append(\'<input type="file" id="files" name="upload_file"/>\');
});
</script>';

$("#files").remove();
$("#ff").append(\'<input type="file" id="files" name="upload_file"/>

Убрал <br/> и заменил span на div чтобы после выгрузки очередного файла, не добавлялся лишний перенос строки.

Я как раз хотел отписаться насчёт br, а ты успел его убрать)