Javascript-форум - Удалить выбранный файл (input file).

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Удалить выбранный файл (input file). (https://javascript.ru/forum/dom-window/62542-udalit-vybrannyjj-fajjl-input-file.html)

St.	15.04.2016 16:14

Удалить выбранный файл (input file).

Подскажите пожалуйста как правильно сделать очистить файл.

<?php
echo '<input id="fileInput_1" type="file" size="75" name="file1">';
echo '<input id="fileInput_2" type="file" size="75" name="file2">';
echo '<input id="fileInput_3" type="file" size="75" name="file3">';
?>

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

Decode

15.04.2016 16:27

А если просто удалить инпут и заново создать.

St.	15.04.2016 16:36

Цитата:

Сообщение от Decode (Сообщение 414217)

А если просто удалить инпут и заново создать.

Удалить можно по id. А вот как создать его?
Маленький пример можно?

// Удалить по id.
function cl(Id)
{
var el = document.getElementById(Id);
el.parentNode.removeChild(el);
}

laimas

15.04.2016 16:48

Если атрибуты поля фиксированные и известны, то appendChild, иначе перед удалением сохранить атрибуты, которые при добавлении нового поля добавить ему.

Decode

15.04.2016 18:27

Цитата:

Сообщение от St.

Маленький пример можно?

<div>
  <input type="file" />
  <button onclick="foo(this)">Очистить</button>
</div>

<script>
  function foo(elem) {
    var prevElem = elem.previousElementSibling;

    var newElem = document.createElement('input');
    newElem.type = 'file';

    elem.parentNode.replaceChild(newElem, prevElem);
  }
</script>

St.	15.04.2016 19:49

Спасибо. Попробую завтра, потом отпишусь.
---
Работает. Здорово. Но только для одного файла.
Извините, а пример с тремя файлами можно?
Пожалуйста.

Decode

16.04.2016 16:00

Цитата:

Сообщение от St.

Извините, а пример с тремя файлами можно?

<div>
  <input type="file" />
  <button onclick="foo(this)">Очистить</button>
</div>
<div>
  <input type="file" />
  <button onclick="foo(this)">Очистить</button>
</div>
<div>
  <input type="file" />
  <button onclick="foo(this)">Очистить</button>
</div>

<script>
  function foo(elem) {
    var prevElem = elem.previousElementSibling;

    var newElem = document.createElement('input');
    newElem.type = 'file';

    elem.parentNode.replaceChild(newElem, prevElem);
  }
</script>

St.	17.04.2016 12:15

Так как вы предлагаете, я делал (см. ниже). При нажатие на кнопку "Удалить 2.", происходит очистка всего массива $_FILES. :cray:
Скрипт пробывал в браузере Opere и в браузере Midori.
Уважаемые. Предложите еще варианты.

<?php
echo '<form method="post" name="myform" enctype="multipart/form-data" action="http://127.0.0.1/qwerty.php">';

echo '<input type="text" name="title" size="64" value="У меня опять бублик" maxlength="100">';
echo '<br>';
echo '<br>';

echo '<div>';
echo '<input type="file" size="75" name="file[]">';
echo '<a href=#" onclick="cl(this)">';
echo 'Удалить 1.' . '<br>';
echo '<a>';
echo '</div>';

echo '<div>';
echo '<input type="file" size="75" name="file[]">';
echo '<a href="#" onclick="cl(this)">';
echo 'Удалить 2.' . '<br>';
echo '<a>';
echo '</div>';

echo '<div>';
echo '<input type="file" size="75" name="file[]">';
echo '<a href="#" onclick="cl(this)">';
echo 'Удалить 3.' . '<br>';
echo '<a>';
echo '</div>';

echo '<br>';
echo '<input type="submit" value="Отправить" name="submit_form" />';

echo '</form>';

//
// JavaScript.
//
echo '<script>

	function cl(elem)
	{
	var prevElem = elem.previousElementSibling;
	var newElem = document.createElement(\'input\');
	newElem.type = \'file\';
	elem.parentNode.replaceChild(newElem, prevElem);
	}

</script>';
?>

П.C.
Если кому интересно смотрим (как делал я): Вставка нескольких изображений js+php.
Только там нет возможности очистить файл (удалить файл) .
http://forum.php.su/topic.php?forum=60&topic=6879

St.	19.04.2016 11:00

Вот еще один вариант (работает). :dance:

<?php

echo '<form method="post" name="myform" enctype="multipart/form-data" action="http://127.0.0.1/qwerty.php">';

echo '<input type="text" name="title" size="64" value="Теперь без бублика" maxlength="100">';
echo '<br>';
echo '<br>';

echo '<div>';
echo '<input id="f1" type="file" size="75" name="file[]">';
echo '<a href=#" onclick="cl(\'f1\')">';
echo 'Удалить 1.' . '<br>';
echo '<a>';
echo '</div>';

echo '<div>';
echo '<input id="f2" type="file" size="75" name="file[]">';
echo '<a href="#" onclick="cl(\'f2\')">';
echo 'Удалить 2.' . '<br>';
echo '<a>';
echo '</div>';

echo '<div>';
echo '<input id="f3" type="file" size="75" name="file[]">';
echo '<a href="#" onclick="cl(\'f3\')">';
echo 'Удалить 3.' . '<br>';
echo '<a>';
echo '</div>';

echo '<br>';
echo '<input type="submit" value="Отправить" name="submit_form" />';

echo '</form>';

//
// JavaScript.
// Взято из одного форумного движка.
//
echo '<script>

function cl(idElement)
{
    var ua = navigator.userAgent;
    var browser = function()
         {
         if (ua.search(/MSIE/) > -1) return "ie";
         if (ua.search(/Opera/) > -1) return "opera";
         if (ua.search(/Chrome/) > -1) return "chrome";
         if (ua.search(/Safari/) > -1) return "safari";
         }
         ();

    if (browser == \'ie\' || browser == \'opera\' || browser == \'chrome\' || browser == \'safari\')
        {
        document.getElementById(idElement).outerHTML = document.getElementById(idElement).outerHTML;
        }
        else
        {
        document.getElementById(idElement).type = \'input\';
        document.getElementById(idElement).type = \'file\';
        }
}

</script>';
?>

Dilettante_Pro

19.04.2016 12:17

Цитата:

Сообщение от St.

При нажатие на кнопку "Удалить 2.", происходит очистка всего массива $_FILES.

Не знаю, как насчет $_FILES, но в неочищенных инпутах информация по файлам остается. (проверено в Хроме, Опере, ИЕ11, ФФ)

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" >
    <title>Untitled Page</title>
    <script type="text/javascript">
        function test(elem) {
            alert(elem.previousElementSibling.previousElementSibling.value);
        }
        function foo(elem) {
            var prevElem = elem.previousElementSibling;

            var newElem = document.createElement('input');
            newElem.type = 'file';

            elem.parentNode.replaceChild(newElem, prevElem);
        }
    </script>
  </head>
  <body>
    <div>
      <input type="file" />
      <button onclick="foo(this)">Очистить</button>
      <button onclick="test(this)">Проверить</button>
   </div>
   <div>
      <input type="file" />
      <button onclick="foo(this)">Очистить</button>
      <button onclick="test(this)">Проверить</button>
   </div>
   <div>
      <input type="file" />
      <button onclick="foo(this)">Очистить</button>
      <button onclick="test(this)">Проверить</button>
   </div>
  </body>
</html>

St.	19.04.2016 12:41

Если я правильно понял, вариант предложенный Decode неправильный.

Dilettante_Pro

19.04.2016 13:11

Цитата:

Сообщение от St. (Сообщение 414466)

Если я правильно понял, вариант предложенный Decode неправильный.

Чем? Мой тестовый пример сделан на основе варианта Decode. В чем он неправильный?

St.	19.04.2016 14:06

Цитата:

Сообщение от Dilettante_Pro (Сообщение 414469)

Чем? Мой тестовый пример сделан на основе варианта Decode. В чем он неправильный?

:stop: Я же написал: "Если я правильно понял...". Это для кого написано?

Возьмите мой пример с функцией от Decode и сделайте следующие.
1. Добавить файл 1.
2. Добавить файл 2.
3. Удалить 1-й файл.
4. Добавить 1-й файл.
5. Отправить.

Что у вас $_FILES?
У меня херня (вместо двух файлов, там один). :cray:

laimas

19.04.2016 14:30

Цитата:

Сообщение от St.

Только там нет возможности очистить файл

Этого просто нельзя сделать. Любое поле для замены:

<script> 
function clearField(f) {
    var t = f.tagName;
    return '<'+t+' ' + [].map.call(f.attributes, function(o) {
        return o.name + '="' + o.value + '"'
    }).join(' ') + (t=='TEXTAREA' ? '</'+t+'>' : ' />');
}
</script>
<input class="as" name="f" value="12" data-d="2" onclick="alert(clearField(this))" />

St.	19.04.2016 14:48

Цитата:

Сообщение от laimas (Сообщение 414478)

Этого просто нельзя сделать. Любое поле для замены:
...
...
...

"Все просто, все понятно..." :)

Dilettante_Pro

19.04.2016 14:50

St.,
Да, без form вроде все нормально, как только вставляешь в form - все ломается

laimas

19.04.2016 15:33

Цитата:

Сообщение от St.

Что у вас $_FILES?
У меня херня (вместо двух файлов, там один).

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<script>
document.addEventListener("DOMContentLoaded", function() { 
    document.querySelector('#fgroup').addEventListener('click', function(e) {
        var o = e.target || e.srcElement;
        if(o.className=="del") o.parentNode.innerHTML = getField(o.parentNode.firstChild) + getField(o) 
    }) 
});

function getField(f) {
    var t = f.tagName;
    return '<'+t+' ' + [].map.call(f.attributes, function(o) {
        return o.name + '="' + o.value + '"'
    }).join(' ') + '>' + (t=='TEXTAREA' || t=='BUTTON' ? '</'+t+'>' : '');
}
</script>     
</head> 
<body>
<pre>
<?php
if($_FILES) print_r($_FILES)
?>
</pre>
<form enctype="multipart/form-data" method="post">
    <div id="fgroup">
        <div class="box"><input type="file" name="as[]" /><input class="del" type="button" value="Clear" /></div>
        <div class="box"><input type="file" name="as[]" /><input class="del" type="button" value="Clear" /></div>
        <div class="box"><input type="file" name="as[]" /><input class="del" type="button" value="Clear" /></div>
    </div>
    <button>Send</button>
</form>
</body> 
</html>

Ни куда не денутся файлы, если форма корректна.

St.	19.04.2016 16:22

Пробывал вариант Iaimas - работает.

Уважаемые, спасибо.
Спасибо: Decode, laimas, Dilettante_Pro.

laimas

19.04.2016 16:37

Цитата:

Сообщение от St.

Пробывал вариант Iaimas - работает.

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

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