Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.04.2016, 16:14
St. St. вне форума
Аспирант
Отправить личное сообщение для St. Посмотреть профиль Найти все сообщения от St.
 
Регистрация: 15.04.2016
Сообщений: 53

Удалить выбранный файл (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">';
?>


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

Последний раз редактировалось St., 15.04.2016 в 16:23.
Ответить с цитированием
  #2 (permalink)  
Старый 15.04.2016, 16:27
Профессор
Отправить личное сообщение для Decode Посмотреть профиль Найти все сообщения от Decode
 
Регистрация: 31.01.2015
Сообщений: 576

А если просто удалить инпут и заново создать.
Ответить с цитированием
  #3 (permalink)  
Старый 15.04.2016, 16:36
St. St. вне форума
Аспирант
Отправить личное сообщение для St. Посмотреть профиль Найти все сообщения от St.
 
Регистрация: 15.04.2016
Сообщений: 53

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

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

Последний раз редактировалось St., 15.04.2016 в 16:38.
Ответить с цитированием
  #4 (permalink)  
Старый 15.04.2016, 16:48
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Если атрибуты поля фиксированные и известны, то appendChild, иначе перед удалением сохранить атрибуты, которые при добавлении нового поля добавить ему.
Ответить с цитированием
  #5 (permalink)  
Старый 15.04.2016, 18:27
Профессор
Отправить личное сообщение для Decode Посмотреть профиль Найти все сообщения от Decode
 
Регистрация: 31.01.2015
Сообщений: 576

Сообщение от 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>

Последний раз редактировалось Decode, 15.04.2016 в 18:58.
Ответить с цитированием
  #6 (permalink)  
Старый 15.04.2016, 19:49
St. St. вне форума
Аспирант
Отправить личное сообщение для St. Посмотреть профиль Найти все сообщения от St.
 
Регистрация: 15.04.2016
Сообщений: 53

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

Последний раз редактировалось St., 16.04.2016 в 10:41.
Ответить с цитированием
  #7 (permalink)  
Старый 16.04.2016, 16:00
Профессор
Отправить личное сообщение для Decode Посмотреть профиль Найти все сообщения от Decode
 
Регистрация: 31.01.2015
Сообщений: 576

Сообщение от 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>
Ответить с цитированием
  #8 (permalink)  
Старый 17.04.2016, 12:15
St. St. вне форума
Аспирант
Отправить личное сообщение для St. Посмотреть профиль Найти все сообщения от St.
 
Регистрация: 15.04.2016
Сообщений: 53

Так как вы предлагаете, я делал (см. ниже). При нажатие на кнопку "Удалить 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., 17.04.2016 в 15:57.
Ответить с цитированием
  #9 (permalink)  
Старый 19.04.2016, 11:00
St. St. вне форума
Аспирант
Отправить личное сообщение для St. Посмотреть профиль Найти все сообщения от St.
 
Регистрация: 15.04.2016
Сообщений: 53

Вот еще один вариант (работает).
<?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>';
?>

Последний раз редактировалось St., 19.04.2016 в 11:13.
Ответить с цитированием
  #10 (permalink)  
Старый 19.04.2016, 12:17
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Сообщение от 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>
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
работа с input type file Moloch jQuery 6 29.07.2015 17:36
Пустой file input суссесфул или не successful? kostyanet Элементы интерфейса 1 08.01.2015 17:56
file input выгрузить выбранный файл Esigns Events/DOM/Window 7 30.11.2012 16:05
При добавлении DOCTYPE "плывут" размеры input type=text Demath (X)HTML/CSS 4 08.07.2012 19:27
Обработка нескольких file input Temlekur Работа 8 21.01.2010 18:30