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

Question

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

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

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

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

Answer 1

Существует 3 способа очистки ввода файла с помощью JavaScript:

1. установить для свойства значение пустое или нулевое.

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

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

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

3. Сброс формы владельца с помощью метода 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);
        }
    }
}

Answer 2

Как насчет:

input.type = "text";
input.type = "file";

Мне еще нужно понять, почему это не работает с webkit .

В любом случае, это работает с IE9>, Firefox и Opera.
Ситуация с webkit такова, что я не могу изменить его обратно на файл.
С IE8 ситуация такова, что он выдает исключение безопасности.

Edit: Для 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, вот и все. <br> Протестировано на Firefox 20, Chrome 24, Opera 12, IE7, IE8, IE9 и IE10.

Answer 3

К сожалению, ни один из приведенных выше ответов не охватывает все основы - по крайней мере, в моем тестировании с использованием 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"));

Answer 4

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

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

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

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

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

Answer 5

РЕШЕНИЕ

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

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

DEMO

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

Ссылки

• Очистка с помощью jQuery

• Как сбросить ввод файла с помощью JavaScript

Answer 6

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

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

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

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

Answer 7

Как насчет удаления этого узла, создания нового с тем же именем?

Answer 8

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

Редактировать:
Этот не работает в IE и Opera, но, похоже, работает для Firefox, Safari и Chrome.

Answer 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>

Answer 10

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