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

[St.]

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

<?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]

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

[St.]

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

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

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

[laimas]

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

[Decode]

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

<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.]

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

[Decode]

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

<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.]

Так как вы предлагаете, я делал (см. ниже). При нажатие на кнопку "Удалить 2.", происходит очистка всего массива $_FILES.
Скрипт пробывал в браузере 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.]

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

<?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]

При нажатие на кнопку "Удалить 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>