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

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

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

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

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

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

$('#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, Я знаю, что капча не нужна Всего-лишь показал, как решил эту проблему.
Без капчи просто не могу показать, потому что этот код часть движка и лежит в репозитории.
.
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 чтобы после выгрузки очередного файла, не добавлялся лишний перенос строки.
.
Ego vir viden
Я как раз хотел отписаться насчёт br, а ты успел его убрать)
Всего: 10
Фильтр по автору
Скачать тему