Цитата из вашего вопроса: Иногда (примерно 1 из 8), после выбора файла, событие ввода не срабатывает после выбора файла.
Я могу подтвердить это с помощью input и с change событиями, используя Opera (версия 55.0.2994.61, новейшая на данный момент версия), которая использует движок браузера Google Chrome "Blink" . Бывает примерно 1 из 25.
Решение
Это происходит потому, что иногда ваш объект элемента ввода удалялся после закрытия диалогового окна файла, потому что он больше не используется. И когда это происходит, у вас нет цели, которая могла бы получить событие input или change.
Чтобы решить эту проблему, просто добавьте свой элемент ввода где-нибудь в DOM после создания в качестве скрытого объекта следующим образом:
fileInputEl.style.display = 'none';
document.body.appendChild(fileInputEl);
И затем, когда событие было запущено, вы можете удалить его следующим образом:
document.body.removeChild(fileInputEl);
Полный пример
function selectFile()
{
var fileInputEl = document.createElement('input');
fileInputEl.type = 'file';
fileInputEl.accept = 'image/*';
//on this way you can see how many files you select (is for test only):
fileInputEl.multiple = 'multiple';
fileInputEl.style.display = 'none';
document.body.appendChild(fileInputEl);
fileInputEl.addEventListener('input', function(e)
{
// Handle files here...
console.log('You have selected ' + fileInputEl.files.length + ' file(s).');
document.body.removeChild(fileInputEl);
});
try
{
fileInputEl.dispatchEvent(new MouseEvent('click'));
}
catch(e)
{
console.log('Mouse Event error:\n' + e.message);
// TODO:
//Creating and firing synthetic events in IE/MS Edge:
//https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/dn905219(v=vs.85)
}
}
<input type="button" onclick="selectFile()" value="Select file">
Цитата из описания вашей награды: Щедрость будет присуждена тому, кто ... покажет подходящий обходной путь.
Мой старый предложенный обходной путь (теперь не имеет значения)
Мы можем использовать функцию setInterval, чтобы проверить, изменилось ли входное значение. Мы сохраняем intervalID в нашем новом fileInputEl как собственность. Поскольку мы всегда создаем новый элемент ввода файла, его значение всегда пусто при запуске (при каждом нажатии кнопки). И если это значение было изменено, мы можем обнаружить его, сравнивая с пустой строкой. И когда это происходит, мы передаем нашу функцию fileInputEl в fileInputChanged() и очищаем / останавливаем нашу функцию интервала.
function selectFile()
{
var fileInputEl = document.createElement('input');
fileInputEl.type = 'file';
fileInputEl.accept = 'image/*';
//on this way you can see how many files you select (is for test only):
fileInputEl.multiple = 'multiple';
fileInputEl.intervalID = setInterval(function()
{
// because we always create a new file input element then
// its value is always empty, but if not then it was changed:
if(fileInputEl.value != '')
fileInputChanged(fileInputEl);
}, 100);
try
{
fileInputEl.dispatchEvent(new MouseEvent('click'));
}
catch(e)
{
console.log('Mouse Event error:\n' + e.message);
// TODO:
//Creating and firing synthetic events in IE/MS Edge:
//https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/dn905219(v=vs.85)
}
}
function fileInputChanged(obj)
{
// Handle files here...
console.log('You have selected ' + obj.files.length + ' file(s).');
clearInterval(obj.intervalID);
}
<input type="button" onclick="selectFile()" value="Select file">