Як я можу очистити введення HTML-файлу за допомогою JavaScript?

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

Я знаю про встановлення джерел на той самий метод ... Але цей метод не буде стерти вибраний шлях до файлу.

Примітка . Хочеться уникати перезавантаження сторінки, скидання форми або здійснення дзвінка AJAX.

Чи можливо це?

Як щодо видалення цього вузла, створення нового з такою ж назвою?

Існує 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);
        }
    }
}

tl; dr : Для сучасних браузерів просто використовуйте

input.value = '';

Стара відповідь:

Як щодо:

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

Я ще мушу зрозуміти, чому це не працює з веб-кайтом .

У будь-якому разі це працює з IE9>, Firefox та Opera.
Ситуація з webkit полягає в тому, що я, здається, не можу змінити його назад у файл.
З IE8 ситуація така, що він кидає виняток із безпеки.

Редагувати: для веб-програми, 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;

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

РЕДАКТУВАННЯ: Зверніть увагу, що налаштування для NULLроботи у всіх браузерах під час встановлення порожнього рядка не було.

На жаль, жодна з перерахованих вище відповідей не охоплює всіх основ - принаймні, не з моїм тестуванням ванільного javascript.

• .value = null, здається, працює на FireFox, Chome, Opera та IE11 (але не IE8 / 9/10)

• .cloneNode(і .clone()в jQuery) на FireFox, схоже, копіює .valueнад, тому клон стає безглуздим.

Отже, ось функція 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"));

РІШЕННЯ

Наступний код працював для мене з jQuery. Він працює у кожному браузері і дозволяє зберегти події та власні властивості.

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

DEMO

Дивіться цей jsFiddle для коду та демонстрації.

ПОСИЛАННЯ

• Очищення <type type = 'file' /> за допомогою jQuery

• Як скинути введення файлів за допомогою JavaScript

Вам потрібно замінити його на новий ввід файлу. Ось як це можна зробити за допомогою 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>

Це насправді досить просто.

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

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

Наведені вище відповіді пропонують дещо незграбні рішення з наступних причин:

1. Я не люблю, щоб перший , а потім отримати HTML - код, це дуже заплутане і брудний.wrapinput

2. Перехресний браузер JS зручний і, здається, що в цьому випадку є занадто багато невідомих, щоб надійно використовувати typeкомутацію (що, знову ж таки, трохи брудно) і налаштування valueна''

Тому я пропоную вам моє рішення на основі jQuery:

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

Він робить те, що каже, замінює вхід самим клоном. Клон не буде обраний файл.

Переваги:

1. Простий і зрозумілий код
2. Ніякого незграбного обгортання чи перемикання типу
3. Перехресна сумісність браузера (виправте мене, якщо я тут не прав)

Результат: Щасливий програміст

Ось два мої центи, вхідні файли зберігаються як масив, ось ось як обнулити його

document.getElementById('selector').value = []

це поверне порожній масив і працює у всіх браузерах

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

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