emkill29 июл 2009 в 14:10

Очистка поля типа file

1 мин

30K

JavaScript *

+60

Комментарии 48

Vas3K 29 июл 2009 в 14:18

Вспоминается фраза: «Что человек должен был делать с коровой, когда узнал, что она дает молоко?».
Так же и у вас xD

emkill 29 июл 2009 в 14:20

не понял вашего юмора ;) поясните плиз

Lachezis 29 июл 2009 в 14:28

Сам очень интересуюсь зачем это?

emkill 29 июл 2009 в 14:32

часто бывают ситуации когда пользователю нужно удалить ранее выбранный файл.
пользователь может передумал отсылать что-нибудь заполняя большую форму…

Lachezis 29 июл 2009 в 14:48

Ни разу не сталкивался с таким, обычно если в форме есть файл — то он ключевой.
Но спасибо за разъяснения.

Goodkat 29 июл 2009 в 16:19

прикрепить фотки к письму или анкете
полей может быть несколько, пользователь сперва выбрал пять файлов в пять полей, а потом решил оставить только один.
или не отправлять фотку в этот раз.

Pingwin32 29 июл 2009 в 20:32

В этом случае лучше использовать вариант есть поле/нет поля. Если нужно добавить файл, нажимается кнопка добавить и появляется поле для добавления файла, а рядом с ним кнопка удаления этого поля. Таким образом мы динамически добавляем нужное нам кол-во полей. А если JS у пользователя выключен(что может встретиться менее чем у 1% пользователей) то и вашь вариант работать не будет… Но можно добавить надпись «Для возможности добавлять файлы включите JS»

alkhankhel 30 июл 2009 в 01:29

Для возможности очищать файлы :)

zzeus 30 июл 2009 в 05:41

Без JS и метод автора не сработает ;)

Vas3K 29 июл 2009 в 15:15

Простите, я покурил xD

НЛО прилетело и опубликовало эту надпись здесь

XAMelleOH 30 июл 2009 в 09:44

«ее»… корову? :)

silentroach 29 июл 2009 в 14:50

элемент.value = '';

а это разве не сработает?

Vas3K 29 июл 2009 в 14:53

У input type=file нет аттрибута value.

silentroach 29 июл 2009 в 15:02

да я просто попробовал в ff 3.5 и предположил что так можно очистить и в других браузерах, просто не проверял (лень).

silentroach 29 июл 2009 в 15:06

и еще в safari работает последнем. а вот в какой-то из последней opera и ie 6 не сработало =(

НЛО прилетело и опубликовало эту надпись здесь

Vas3K 29 июл 2009 в 15:14

Да, только ридонли, вы правы. Поэтому простой value = '' здесь нам не поможет.

НЛО прилетело и опубликовало эту надпись здесь

emkill 29 июл 2009 в 15:00

не работает. все манипуляции с атрибутами ничего не дали…

Nc_Soft 29 июл 2009 в 15:10

Если бы у него был атрибут валуе, то можно было туда вписать адрес файла и ява скриптом засубмитить форму при заходе на страницу. Сбылась бы мечта многих хакеров: как утянуть любой файл с компа жертвы.

silentroach 29 июл 2009 в 15:18

в FF и Safari их мечта, значит, сбылась? =)

НЛО прилетело и опубликовало эту надпись здесь

Nc_Soft 29 июл 2009 в 15:29

Нет, не сбылась, это у них обнуление сработало.
Прописать произвольное значение без участия юзера там не выйдет, потому что у

Nc_Soft 29 июл 2009 в 15:35

… файлового инпута нет и быть не может атрибута value

emkill 29 июл 2009 в 15:29

ха :) точно

НЛО прилетело и опубликовало эту надпись здесь

emkill 29 июл 2009 в 15:27

хм… ну пока глюков не наблюдаю в ИЕ.

tvv 29 июл 2009 в 19:29

Побочных эффектов не наблюдалось, проект, где я этот способ применял, уже полгода в продакшене, дефектов на эту тему не постили. То есть этот способ можно считать вроде как бы надежным. Работает в IE6, IE7 и IE8.

Но идеологически это решение кривое-кривое… все же лучше от него отказаться, именно по тем соображениям, что это «специфик» браузера.

abarmot 29 июл 2009 в 15:24

Спасибо!
Пригодилось вот прямо сейчас!!!

Думал это невозможно без удаления элемента…

Спасибо еще раз!

emkill 29 июл 2009 в 15:28

рад что пригодились результаты моих экспериментов :)

DeadLy 29 июл 2009 в 16:11

Не совсем понял для чего это нужно, скорее всего проблема высосана из пальца, но…
input type='reset'
для того и придумали.

basilisk 29 июл 2009 в 16:16

ну это очищает ВСЮ форму. а если кому-нибудь взбредёт в голову очистить только полформы — то увы. заказчики порой загадочные бывают… ;)

FloppyFormator 29 июл 2009 в 16:17

Я так понимаю, задача в том, чтобы сохранить значение в других полях формы. Правда их можно пересохранить и восстановить. Или поубирать из формы. Но то, что предложил автор, действительно проще.

Servn 29 июл 2009 в 16:21

FF 3.5.1

<html>

<body>

<form>

<input type="file" name="test" id="test" />

<input type="button" name="clear" value="clear" onclick="alert(document.getElementById('test').innerHTML); document.getElementById('test').innerHTML = document.getElementById('test').innerHTML;" />

</form>

</body>

</html>

Не очищает.
И alert в первый раз выдает пустую строку, а в последующие разы "<input>" N-1 раз подряд, где N — количество нажатий кнопки минус 1.

Jenek 29 июл 2009 в 16:34

Там не настолько все революционно, этот способ просто неявно удаляет и создает новое поле файлового ввода (если я не попутал способ):
designformasters.info/lab/clear-file-input/index.html
Код смотрите innerHTML не самого инпута, а контейнера в который он вложен.

Jenek 29 июл 2009 в 16:48

код:

<html>

<head>

    <script>

        function clearFileInputField(Id)

        {

            document.getElementById(Id).innerHTML = document.getElementById(Id).innerHTML;

        }

    </script>



</head>

<body>

    <form>

    <div id="fileInputContainer">

        <input id="fileInput" name="fileInput" type="file">

    </div>

    <a href="#" onclick="clearFileInputField('fileInputContainer'); return false;">Очистить</a>

    </form>

</body>

</html>

Zitrix 29 июл 2009 в 17:50

неявно код в посте написан, я тоже сначала не вкурил какой у input[type=«file»] может быть innerHTML.

так было бы куда честнее:

function clearFileInputField(Id) {
  document.getElementById(Id).parentNode.innerHTML += " ";
}

lahmatiy 2 авг 2009 в 21:56

Честнее но куда опаснее. parentNode может содержать другие элементы, на которые могут быть ссылки в js.

tvv 29 июл 2009 в 19:34

В FF (но не в IE!) очистка будет работать, если использовать

document.getElementById('test').value = '';

проверено в FF 3.0.x

(хоть это и работает, но я на практике это не применяю, как-то не нравится мне такой подход)

Napolsky 29 июл 2009 в 17:54

однако

Zitrix 29 июл 2009 в 17:57

обработчики событий, прикрепленные к этой ноде через addEventListener/attachEvent перестанут срабатывать.

про такие ограничения лучше сразу говорить, пусть и можно перевесить обработчик выше

alexmuz 29 июл 2009 в 18:08

С использованием jQuery делаю так:
$("#file_field").replaceWith($("#file_field").clone());
Работает вроде везде и события сохраняются.
file_field — id инпута

alexmuz 29 июл 2009 в 18:14

Чтобы события сохранялись надо clone(true) делать.

tvv 29 июл 2009 в 19:23

Да, этот способ работает, использовал на практике.

Кстати интересно, что в FF (но не в IE!) работает даже конструкция: элемент.value = '';
Да да, это не ошибка, у input type=file хоть value и является readonly, но присвоить пустое значение (таким образом сделав очистку поля) FF позволяет, это не является нарушением безопасности.

Но мой любимый способ это, конечно, reset формы… к сожалению, если нужно очистить только поле аплоада файла, не трогая остальные поля, приходится такое поле оформлять в отдельной форме… но зато работает везде, и не надо никаких извращений.

e_Jin 30 июл 2009 в 20:33

Прошу прощения, но разве использовать сброс конретного объекта (а не всей формы) не выход?

<INPUT type="file" name="UPLOAD" title="Выбрать и загрузить файл на сервер" onchange="return upload(this.form);" />

Пример:

function upload(obj) {
	if (confirm('Загрузить файл на сервер?')) {
		obj.submit();
	}
	else {
		obj.reset();
	}
}

rondob 21 окт 2009 в 11:47

а может кто знает как получить на JS путь к файлу из

<input type=file>

karamba 25 янв 2010 в 20:04

Обязательно напишите, что обнулять нужно именно код контейнера, в котором лежит инпут, а то у самого инпута никакого innerHTML нет, а то топик в поиске появляется и люди потом наверняка как я теряют время, разбираясь в этом нюансе.

Зарегистрируйтесь на Хабре, чтобы оставить комментарий