Ответы:
Как насчет удаления этого узла, создания нового с тем же именем?
Есть 3 способа очистить ввод файла с помощью JavaScript:
установить значение свойства на пустое или нулевое.
Работает для IE11 + и других современных браузеров.
Создайте новый элемент ввода файла и замените старый.
Недостатком является то, что вы потеряете прослушиватели событий и расширенные свойства.
Сбросьте форму владельца с помощью метода form.reset ().
Чтобы не влиять на другие элементы ввода в той же форме владельца, мы можем создать новую пустую форму, добавить элемент ввода файла в эту новую форму и сбросить его. Этот способ работает для всех браузеров.
Я написал функцию JavaScript. демо: http://jsbin.com/muhipoye/1/
function clearInputFile(f){
if(f.value){
try{
f.value = ''; //for IE11, latest Chrome/Firefox/Opera...
}catch(err){ }
if(f.value){ //for IE5 ~ IE10
var form = document.createElement('form'),
parentNode = f.parentNode, ref = f.nextSibling;
form.appendChild(f);
form.reset();
parentNode.insertBefore(f,ref);
}
}
}
tl; dr : для современных браузеров просто используйте
input.value = '';
Как насчет:
input.type = "text";
input.type = "file";
Я все еще должен понять, почему это не работает с webkit .
В любом случае, это работает с IE9>, Firefox и Opera.
Ситуация с webkit такова, что я не могу изменить его обратно в файл.
С IE8 ситуация такова, что он выдает исключение безопасности.
Редактировать: Для webkit, Opera и Firefox это работает, хотя:
input.value = '';
(проверьте приведенный выше ответ с этим предложением)
Я посмотрю, смогу ли я найти более чистый способ сделать этот кросс-браузер без GC.
Edit2:
try{
inputs[i].value = '';
if(inputs[i].value){
inputs[i].type = "text";
inputs[i].type = "file";
}
}catch(e){}
Работает с большинством браузеров. Не работает с IE <9, вот и все.
Протестировано на Firefox 20, Chrome 24, Opera 12, IE7, IE8, IE9 и IE10.
Установка значения в ''
не работает во всех браузерах.
Вместо этого попробуйте установить значение null
как:
document.getElementById('your_input_id').value= null;
РЕДАКТИРОВАТЬ: Я получаю очень веские причины безопасности для того, чтобы не разрешать JS устанавливать ввод файла, однако представляется разумным предоставить простой механизм для очистки уже выбранного вывода. Я попытался использовать пустую строку, но она не работала во всех браузерах, NULL
работала во всех браузерах, которые я пробовал (Opera, Chrome, FF, IE11 + и Safari).
РЕДАКТИРОВАТЬ: Обратите внимание, что установка на NULL
работает во всех браузерах, а установка на пустую строку не сделал.
all browsers
... это не работает в IE8, IE9 или IE10 (но работает в IE11).
К сожалению, ни один из приведенных выше ответов, по-видимому, не охватывает все основы - по крайней мере, в моем тестировании с использованием vanilla javascript.
.value = null
похоже работает на FireFox, Chome, Opera и IE11 (но не IE8 / 9/10 )
.cloneNode
(и .clone()
в jQuery) в FireFox, похоже, копирует .value
овер, поэтому делает клон бессмысленным.
Итак, вот написанная мной функция vanilla javascript, которая работает в FireFox (27 и 28), Chrome (33), IE (8, 9, 10, 11), Opera (17) ... это единственные доступные в настоящее время браузеры мне проверить с.
function clearFileInput(ctrl) {
try {
ctrl.value = null;
} catch(ex) { }
if (ctrl.value) {
ctrl.parentNode.replaceChild(ctrl.cloneNode(true), ctrl);
}
}
ctrl
Параметр является сам входной файл, так что функция будет называться ...
clearFileInput(document.getElementById("myFileInput"));
if
оператор не должен быть помещен в catch
блок?
null
. Не могли бы вы объяснить, какой смысл ставить ctrl.value = null;
внутри try...catch
блока? Извините за новый вопрос.
ctrl.parentNode.replaceChild(ctrl.cloneNode(true), ctrl);
- в какой момент мы на самом деле очищаем значение, поскольку cloneNode
также копируем его?
Следующий код работал для меня с jQuery. Он работает в любом браузере и позволяет сохранять события и пользовательские свойства.
var $el = $('#your-input-id');
$el.wrap('<form>').closest('form').get(0).reset();
$el.unwrap();
Смотрите этот jsFiddle для кода и демонстрации.
Вам нужно заменить его на новый файл ввода. Вот как это можно сделать с помощью jQuery:
var inputFile = $('input[type=field]');
inputFile.wrap('<div />');
и используйте эту строку, когда вам нужно очистить поле ввода (например, для какого-либо события):
inputFile.parent().html( inputFile.parent().html() );
document.getElementById('your_input_id').value=''
Изменить:
этот не работает в IE и опере, но, кажется, работает для Firefox, Safari и Chrome.
У меня была такая же проблема, и я придумал это.
var file = document.querySelector('input');
var emptyFile = document.createElement('input');
emptyFile.type = 'file';
document.querySelector('button').onclick = function(){
file.files = emptyFile.files;
}
<input type='file'>
<button>clear</button>
Я искал простой и понятный способ очистки ввода HTML-файла, приведенные выше ответы великолепны, но ни один из них на самом деле не отвечает на то, что я ищу, пока я не наткнулся в Интернете на простой и элегантный способ сделать это:
var $input = $("#control");
$input.replaceWith($input.val('').clone(true));
все заслуги перед Крисом Койером .
// Referneces
var control = $("#control"),
clearBn = $("#clear");
// Setup the clear functionality
clearBn.on("click", function(){
control.replaceWith( control.val('').clone( true ) );
});
// Some bound handlers to preserve when cloning
control.on({
change: function(){ console.log( "Changed" ) },
focus: function(){ console.log( "Focus" ) }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="control">
<br><br>
<a href="#" id="clear">Clear</a>
Приведенные выше ответы предлагают несколько неуклюжих решений по следующим причинам:
Я не люблю, чтобы первый , а затем получить HTML - код, это очень запутанное и грязный.wrap
input
Кросс-браузерный JS удобен, и кажется, что в этом случае слишком много неизвестных, чтобы надежно использовать type
переключение (что опять-таки немного грязно) и установку value
на''
Поэтому я предлагаю вам свое решение на основе jQuery:
$('#myinput').replaceWith($('#myinput').clone())
Он делает то, что говорит, он заменяет входные данные своим клоном. У клона не будет выбранного файла.
Преимущества:
Результат: счастливый программист
Cross browser compatibility
... мое тестирование показывает, что FireFox копирует .value
как часть .clone()
, поэтому делает его бесполезным
replaceWith
? Я использую clone()
себя, и он отлично работает в Firefox (я не знаю, будет ли это до сих пор для вас год спустя =))
Мне помогло то, что я попытался извлечь и загрузить последний выбранный файл, используя цикл, вместо очистки очереди, и это сработало. Вот код
for (int i = 0; i <= Request.Files.Count-1; i++)
{
HttpPostedFileBase uploadfile = files[i];
Stream fs = uploadfile.InputStream;
BinaryReader br = new BinaryReader(fs);
Byte[] imageBytes = br.ReadBytes((Int32)fs.Length);
}
Надеюсь, это поможет некоторым.
Я перепробовал большинство решений, но, похоже, никто не работал. Однако я нашел прогулку вокруг этого ниже.
Структура формы: form
=> label
, input
и submit button
. После того, как мы выберем файл, имя файла будет показано надписью, сделав это вручную в JavaScript.
Поэтому моя стратегия такова: изначально отправка button
отключена, после выбора файла disabled
атрибут кнопки отправки будет удален, чтобы я мог отправить файл. После отправки я очищаю, label
что делает его похожим, я очищаю файлinput
но на самом деле это не так. Затем я снова отключу кнопку отправки, чтобы запретить отправку формы.
Установив отправку button
disable
или нет, я прекращаю отправку файла много раз, если не выберу другой файл.
Я изменил, чтобы напечатать текст и вернуться к типу в файл, используя setAttribute
'<input file-model="thefilePic" style="width:95%;" type="file" name="file" id="filepicture" accept="image/jpeg" />'
'var input=document.querySelector('#filepicture');'
if(input != null)
{
input.setAttribute("type", "text");
input.setAttribute("type", "file");
}
метод input.value = null
является рабочим, однако он будет вызывать change
событие ввода только в случае вызова изonclick
события.
Решением этой проблемы будет вызов этого onchange
обработчика вручную всякий раз, когда вам нужно сбросить ввод.
function reset_input(input) {
$(input)[0].value = null;
input_change_handler();
}
function input_change_handler() {
// this happens when there's been a change in file selection
if ($(input)[0].files.length) {
// file(s) selected
} else {
// nothing is selected
}
}
$(input).on('change', input_change_handler);