Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   очистка input, с типом file (https://javascript.ru/forum/jquery/51664-ochistka-input-s-tipom-file.html)

Euler 14.11.2014 21:56

очистка input, с типом file
 
Доброго времени суток. Нужно очистить заполненное поле ввода типа file.
Пробовал $("#my_file").prop("files", []) и странный метод document.getElementById("my_file").innerHTML = document.getElementById("my_file").innerHTML отсюда - ничего не работает(проверял только в последнем FF).
Подскажите люди добрые, как это поле зачистить(не цепляя к нему отдельную форму, разумеется:) ).

devote 14.11.2014 22:01

как вариант пересоздать элемент

nerv_ 14.11.2014 22:28

element.prop('value', null);

danik.js 14.11.2014 23:10

Цитата:

Сообщение от Euler
отсюда - ничего не работает

Там в последних комментариях сказано - что innerHTML нужно у родителя переписывать, а не у инпута. Пост бесполезный, только с толку народ сбивает (я сначала тоже повелся :) )

Цитата:

Сообщение от nerv_
element.prop('value', null);

Насколько это кроссбраузерно? В jQuery это по-особому обрабатывается для файловых инпутов?

Цитата:

Сообщение от Euler
не цепляя к нему отдельную форму, разумеется

Можно создать временную форму, добавить в нее поле, вызвать reset и вернуть поле на место.

bes 14.11.2014 23:57

Цитата:

Сообщение от Euler
Пробовал $("#my_file").prop("files", [])

http://www.w3.org/TR/FileAPI/#attributes-filelist
Цитата:

Note
The HTMLInputElement interface [html] has a readonly attribute of type FileList, which is what is being accessed in the above example. Other interfaces with a readonly attribute of type FileList include the DataTransfer interface [html].
http://www.w3.org/TR/2011/WD-html5-2...t-element.html
Цитата:

readonly attribute FileList files;


Цитата:

Сообщение от danik.js
Там в последних комментариях сказано - что innerHTML нужно у родителя переписывать, а не у инпута.

в конце этого "супер длинного" поста есть ссылка на пример :)
http://designformasters.info/lab/cle...put/index.html

сам пример реализует один из вариантов того, про что ведёт речь devote

krutoy 15.11.2014 00:31

Через input.value не получается?
<html>
<head>
</head>
<body>

<input id="inp" type="file" />
<button id="but">
</button>

<script>
var but=document.querySelector("#but")
var inp=document.querySelector("#inp")
but.onclick=function(){
   inp.value=""
}

</script>
 
</body>
</html>

Euler 15.11.2014 02:02

Всем спасибо, в моём случае самым простым вариантом оказалось обернуть файлы в формы и очищать их $("#form_my_file")[0].reset();
Сброс value нужно будет проверить, очень неочевидный вариант, учитывая отсутствие такого свойства у файлов :) .

danik.js 15.11.2014 07:49

Цитата:

Сообщение от Euler
Сброс value нужно будет проверить, очень неочевидный вариант, учитывая отсутствие такого свойства у файлов

Все уже проверено - читай комментарии у статьи. Статья мож и бесполезная, но, как часто бывает, в комментариях больше важной инфы.

krutoy 15.11.2014 08:24

Цитата:

Сообщение от Euler
учитывая отсутствие такого свойства у файлов

У каких файлов? Вы же, вроде, про поля говорили.

bes 15.11.2014 09:33

input.value = ""; вполне кроссбраузерный вариант

удивляет то, что в ie11 до сих пор нет fakepath
http://www.w3.org/TR/2011/WD-html5-2...value-filename
http://www.w3.org/TR/2011/WD-html5-2...e-upload-state
<!DOCTYPE html>
<meta charset="utf-8"/>

<script>
function extractFilename(path) {
  var x;
  x = path.lastIndexOf('\\');
  if (x >= 0) // Windows-based path
    return path.substr(x+1);
  x = path.lastIndexOf('/');
  if (x >= 0) // Unix-based path
    return path.substr(x+1);
  return path; // just the filename
}
</script>
This can be used as follows:

<p><input type=file name=image onchange="updateFilename(this.value)"></p>
<p>The name of the file you picked is: <span id="filename">(none)</span></p>
<script>
 function updateFilename(path) {
   var name = extractFilename(path);
   document.getElementById('filename').textContent = name;
   
   alert(path);
 }
</script>


PS: хотя вру, здесь на сайте (а не локально) в ie всё-таки вывело fakepath (на локальном сервере тоже он), ну слава богу :)


Часовой пояс GMT +3, время: 01:51.