Удалить выбранный файл (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">'; ?> Т.е. пользователь выбрал несколько файлов, а после чего один файл оказался ненужным. Нужна кнопка очистить. Искал в интернете, но ничего не нашел. Нужна помощь. |
А если просто удалить инпут и заново создать.
|
Цитата:
Маленький пример можно?
// Удалить по id.
function cl(Id)
{
var el = document.getElementById(Id);
el.parentNode.removeChild(el);
}
|
Если атрибуты поля фиксированные и известны, то appendChild, иначе перед удалением сохранить атрибуты, которые при добавлении нового поля добавить ему.
|
Цитата:
<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>
|
Спасибо. Попробую завтра, потом отпишусь.
--- Работает. Здорово. Но только для одного файла. Извините, а пример с тремя файлами можно? Пожалуйста. |
Цитата:
<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>
|
Так как вы предлагаете, я делал (см. ниже). При нажатие на кнопку "Удалить 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 |
Вот еще один вариант (работает). :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>';
?>
|
Цитата:
<!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>
|
| Часовой пояс GMT +3, время: 08:43. |