Альтернатива событию onchange в ‹input type = 'file' /›

Кажется, действительно простая вещь, но я не могу ее понять. Я использовал событие onchange для элемента <input type=file />, и он работает хорошо. Как только пользователь просматривает и выбирает файл, я получаю путь и загружаю его с помощью своей пользовательской функции js.

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

(Подобно Очистка ‹input type = 'file' /› с помощью jQuery, не уверен если я должен решить это как дубликат)


javascript file html file-upload dom-events
person Yasir Laghari    schedule 25.01.2010    source источник

Ответы (8)


arrow_upward
9
arrow_downward

Вы можете просто удалить ввод и создать идентичный с помощью javascript - новый будет пустым.

(ответ отредактирован, чтобы быть точным, комментарии сейчас неактуальны)

person raveren    schedule 25.01.2010
comment
Текст доступен только для чтения, не думаю, что смогу его очистить? - person Yasir Laghari; 25.01.2010
comment
Ограничение только для чтения предназначено только для пользователей - если я понимаю, что вы говорите, в другом случае вы можете просто удалить ввод и создать его с помощью javascript - новый обязательно будет пустым. - person raveren; 25.01.2010

arrow_upward
2
arrow_downward

У вас может быть кнопка выбора файла для очистки содержимого ввода onclick, таким образом, даже если они выберут тот же файл, что ваше событие все равно будет запускаться. Конечно, тогда ваш обработчик onchange должен будет проверить пустые значения, но он, вероятно, должен будет делать что-то подобное или что-то еще, если он собирается использовать это значение для загрузки файла ...

person tfwright    schedule 25.01.2010
comment
Спасибо, ребята, но поле значения недоступно только для чтения. Я не думаю, что могу изменить его значение пустым? - person Yasir Laghari; 25.01.2010
comment
Есть ли у вас другие данные в форме? Если нет, вы можете просто сбросить форму. - person tfwright; 25.01.2010
comment
Reset () может работать, но я думаю, что .replaceWith - более чистое решение (поскольку вероятность побочных эффектов меньше) - person Yasir Laghari; 25.01.2010

arrow_upward
1
arrow_downward

На самом деле нет никакого способа исправить это. Если вы добавите любой другой прослушиватель или таймер, вы потенциально загрузите файл, даже если пользователь этого не хочет (например, с помощью onclick). Вы уверены, что загрузить тот же файл по-другому нельзя? Как насчет очистки ввода после начала загрузки (или замены его новым вводом, если вы не можете его очистить).

person Marius    schedule 25.01.2010
comment
Ага, замена сработала! Спасибо, Мариус. Нашел решение здесь: stackoverflow.com/questions/ 1043957 / - person Yasir Laghari; 25.01.2010

arrow_upward
1
arrow_downward

Вы не можете запустить событие изменения во второй раз при вводе файла, но вы можете запустить событие изменения в диапазоне. Ниже работает в хроме и ff. В IE не проверял. $('#change_span').bind('change',function(){ alert($('#file_1').val()) })

<span id='change_span'><input id="file_1" type="file"></span>

person Andrey    schedule 21.04.2011

arrow_upward
1
arrow_downward

Установите значение ввода равным "" в обратном вызове onchange. Таким образом, если в следующий раз будет выбран тот же файл, событие onchange все равно будет запущено, потому что значение отличается от "".

document.getElementById('files').value = "";
person WebWanderer    schedule 23.07.2014

arrow_upward
0
arrow_downward

Такое поведение присутствует только в IE? Если да, то это может быть связано с этой проблемой:
Событие изменения jQuery на ‹select› не запускается в IE
По сути: вместо этого вам может потребоваться проверить onClick.

person Daniel Sloof    schedule 25.01.2010
comment
Спасибо, Дэниел попробовал OnClick, но он вызывается до того, как пользователь выберет файл, поэтому бесполезно :( - person Yasir Laghari; 25.01.2010

arrow_upward
0
arrow_downward 

function resetFileInput ($element) {
  var clone = $element.clone(false, false);
  $element.replaceWith(clone);
}

А затем используйте live:

$('#element_id').live('change', function(){
...
});

Хорошо сработало для меня!

person oreoshake    schedule 15.07.2011

arrow_upward
0
arrow_downward

Если вы не хотите использовать jQuery

<form enctype='multipart/form-data'>
    <input onchange="alert(this.value); return false;" type='file'>
    <br>
    <input type='submit' value='Upload'>
</form>

Он отлично работает в Firefox, но для Chrome вам нужно добавить this.value=null; после предупреждения.

person elshnkhll    schedule 20.09.2014