emkill Jul 29 2009 at 14:10

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

1 min

30K

JavaScript*

+60

Comments 48

Vas3K Jul 29 2009 at 14:18

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

emkill Jul 29 2009 at 14:20

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

Lachezis Jul 29 2009 at 14:28

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

emkill Jul 29 2009 at 14:32

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

Lachezis Jul 29 2009 at 14:48

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

Goodkat Jul 29 2009 at 16:19

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

Pingwin32 Jul 29 2009 at 20:32

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

alkhankhel Jul 30 2009 at 01:29

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

zzeus Jul 30 2009 at 05:41

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

Vas3K Jul 29 2009 at 15:15

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

UFO landed and left these words here

XAMelleOH Jul 30 2009 at 09:44

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

silentroach Jul 29 2009 at 14:50

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

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

Vas3K Jul 29 2009 at 14:53

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

silentroach Jul 29 2009 at 15:02

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

silentroach Jul 29 2009 at 15:06

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

UFO landed and left these words here

Vas3K Jul 29 2009 at 15:14

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

UFO landed and left these words here

emkill Jul 29 2009 at 15:00

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

Nc_Soft Jul 29 2009 at 15:10

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

silentroach Jul 29 2009 at 15:18

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

UFO landed and left these words here

Nc_Soft Jul 29 2009 at 15:29

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

Nc_Soft Jul 29 2009 at 15:35

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

emkill Jul 29 2009 at 15:29

ха :) точно

UFO landed and left these words here

emkill Jul 29 2009 at 15:27

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

tvv Jul 29 2009 at 19:29

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

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

abarmot Jul 29 2009 at 15:24

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

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

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

emkill Jul 29 2009 at 15:28

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

DeadLy Jul 29 2009 at 16:11

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

basilisk Jul 29 2009 at 16:16

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

FloppyFormator Jul 29 2009 at 16:17

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

Servn Jul 29 2009 at 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 Jul 29 2009 at 16:34

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

Jenek Jul 29 2009 at 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 Jul 29 2009 at 17:50

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

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

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

lahmatiy Aug 2 2009 at 21:56

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

tvv Jul 29 2009 at 19:34

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

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

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

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

Napolsky Jul 29 2009 at 17:54

однако

Zitrix Jul 29 2009 at 17:57

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

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

alexmuz Jul 29 2009 at 18:08

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

alexmuz Jul 29 2009 at 18:14

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

tvv Jul 29 2009 at 19:23

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

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

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

e_Jin Jul 30 2009 at 20:33

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

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

Пример:

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

rondob Oct 21 2009 at 11:47

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

<input type=file>

karamba Jan 25 2010 at 20:04

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