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

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

1. установите для свойства value значение empty или null.

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

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

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

3. сброс формы владельца через форму.сброс() метод.

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

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

как насчет:

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 Протестировано на firefox 20, chrome 24, opera 12, IE7, IE8, IE9 и IE10.

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

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

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

Итак, вот функция JavaScript vanilla Я написал, что работает на FireFox (27 и 28), Chrome (33), IE (8, 9, 10, 11), Опера (17)... это единственные браузеры, доступные мне в настоящее время для тестирования.

function clearFileInput(ctrl) {
  try {
    ctrl.value = null;
  } catch(ex) { }
  if (ctrl.value) {
    ctrl.parentNode.replaceChild(ctrl.cloneNode(true), ctrl);
  }
}

The ctrl параметр-это сам входной файл, поэтому функция будет называться как...

clearFileInput(document.getElementById("myFileInput"));

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

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

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

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

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

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

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

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

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

решение

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

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

DEMO

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

ссылки

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

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

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

Edit:
Это не работает в IE и opera, но, кажется, работает для firefox, safari и chrome.

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

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

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

поэтому я предлагаю вам мое решение на основе jQuery:

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

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

плюсы:

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

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

Я искал простой и чистый способ очистить ввод HTML-файла, приведенные выше ответы великолепны, но ни один из них не отвечает на то, что я ищу, пока я не столкнулся в интернете с простым элегантным способом сделать это :

var $input = $("#control");

$input.replaceWith($input.val('').clone(true));

все кредиты идут к Крис Coyier.

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

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

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

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