Как я могу очистить ввод HTML файла с помощью JavaScript?

Я хочу очистить входной файл в моей форме.

Я знаю об установке источников в один и тот же метод... Но этот метод не стирает выбранный путь к файлу.

Примечание. Я бы хотел избежать перезагрузки страницы, reset формы или выполнить вызов AJAX.

Возможно ли это?

Ответы

Ответ 1

Как удалить этот node, создав новый с тем же именем?

Ответ 2

Там 3 способа очистки ввода файла с помощью javascript:

  • значение свойства set равно пустому или нулевому.

    Работает для IE11 + и других современных браузеров.

  • Создайте новый элемент ввода файла и замените старый.

    Недостатком является то, что вы потеряете прослушиватели событий и свойства expando.

  • Reset форма владельца с помощью метода form.reset().

    Чтобы избежать влияния на другие элементы ввода в одной и той же форме владельца, мы можем создать новую пустую форму и добавить элемент ввода файла в эту новую форму и reset. Этот способ работает для всех браузеров.

Я написал функцию javascript. demo: 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);
        }
    }
}

Ответ 3

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 & lt; 9, это все.
Протестировано на Firefox 20, Chrome 24, Opera 12, IE7, IE8, IE9 и IE10.

Ответ 4

К сожалению, ни один из вышеперечисленных ответов не охватывает все базы - по крайней мере, не с моим тестированием с помощью javascript с ванилью.

  • .value = null, похоже, работает с FireFox, Chome, Opera и IE11 (но не IE8/9/10)

  • .cloneNode (и .clone() в jQuery) на FireFox появляется, чтобы скопировать .value поверх, поэтому сделать клон бессмысленным.

Итак, вот функция javascript vanilla, которую я написал, которая работает на 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"));

Ответ 5

Установка значения '' не работает во всех браузерах.

Вместо этого попробуйте установить значение null следующим образом:

document.getElementById('your_input_id').value= null;

EDIT: Я получаю очень обоснованные причины безопасности, не позволяя JS устанавливать входной файл, однако представляется разумным предоставить простой механизм для очистки уже выбора вывода. Я попытался использовать пустую строку, но она не работала во всех браузерах, null работал во всех браузерах, которые я пробовал (Opera, Chrome, FF, IE11 + и Safari).

EDIT: Обратите внимание, что установка на null работает во всех браузерах при установке на пустую строку.

Ответ 6

U нужно заменить его новым вводом файла. Вот как это можно сделать с помощью jQuery:

var inputFile = $('input[type=field]');
inputFile.wrap('<div />');

и используйте эту строку, когда вам нужно очистить поле ввода (например, на каком-либо событии):

inputFile.parent().html( inputFile.parent().html() );

Ответ 7

РЕШЕНИЕ

Следующий код работал у меня с jQuery. Он работает в каждом браузере и позволяет сохранять события и настраиваемые свойства.

var $el = $('#your-input-id');
$el.wrap('<form>').closest('form').get(0).reset();
$el.unwrap();

DEMO

Смотрите этот jsFiddle для кода и демонстрации.

Ссылки

Ответ 8

document.getElementById('your_input_id').value=''

Изменить:
Это не работает в IE и опера, но, похоже, работает для firefox, safari и chrome.

Ответ 9

У меня была такая же проблема, и я придумал это.

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>

Ответ 10

Это на самом деле довольно легко.

document.querySelector('#input-field').value = '';

Ответ 11

Вышеупомянутые ответы предлагают несколько неуклюжие решения по следующим причинам:

  • Мне не нравится сначала wrap input, а затем получить html, он очень запутан и грязный.

  • Кросс-браузер JS удобен, и кажется, что в этом случае слишком много неизвестных, чтобы надежно использовать переключение type (что опять-таки немного грязно) и установка value в ''

Итак, я предлагаю вам решение на основе jQuery:

$('#myinput').replaceWith($('#myinput').clone())

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

Преимущества:

  • Простой и понятный код
  • Отсутствие неуклюжей упаковки или переключения типов.
  • Совместимость с браузером (поправьте меня, если я ошибаюсь здесь)

Результат: Счастливый программист

Ответ 12

Я искал простой и понятный способ очистки ввода 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>

Ответ 13

Мне помогло то, что я попытался извлечь и загрузить последний выбранный файл, используя цикл, вместо очистки очереди, и это сработало. Вот код

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);
}

Надеюсь, это поможет некоторым.

Ответ 14

Я перепробовал большинство решений, но, похоже, никто не работал. Однако я нашел прогулку вокруг этого ниже.

Структура формы: form => label, submit button input и submit button. После того, как мы выберем файл, имя файла будет показано надписью, сделав это вручную в JavaScript.

Поэтому моя стратегия такова: изначально button отправки отключена, после выбора файла атрибут disabled кнопки отправки будет удален, так что я могу отправить файл. После отправки я очищаю label которая выглядит так, будто я очищаю input файла, но на самом деле это не так. Затем я снова отключу кнопку отправки, чтобы запретить отправку формы.

Установив disable button disable или нет, я запрещаю отправку файла много раз, если не выберу другой файл.