Это в основном и упрощено то, что у меня есть сейчас:
<style>
form.noshow { height: 0; overflow: hidden; }
</style>
<form class=noshow target="SomeIframeThatExists">
<input type=file id=uf>
</form>
<a id=uflink href="/user/photo">Upload photo</a>
<script>
$('uf').addEvent('change', function(e) {
// alert('oele'); // this would work fine
this.form.submit(); // auch in IE > "Access denied" exception
});
$('uflink').addEvent('click', function(e) {
$('uf').click(); // opens file dialog in all browsers inc IE
return false;
});
</script>
Что он делает (отлично) в Chrome 11 и FF 4:
- Форма скрыта.
- Вы нажимаете ссылку
- Выберите диалог открытия файла
- Вы выбираете файл
- Диалог закрывается
- Форма отправлена
- Script в iframe выполняется и снижается фотография
Очень приветливый и сладкий.
В IE все работает, кроме [6]. Форма не отправляется. Ошибка Javascript: "Доступ запрещен". Неважно, как форма невидима, если диалог был открыт с помощью input.click(), форма не может быть отправлена при изменении. (Функция onchange выполняется нормально. Ошибка возникает только при вызове form.submit().)
Теперь все это я могу принять. IE отстой. Я живу с ним.
Мое решение до сих пор заключалось в проверке navigator для "MSIE", а затем при нажатии ссылки вместо открытия диалога, показывающего форму (с вводом файла). Затем пользователь должен щелкнуть фактический, уродливый ввод файла, а затем все будет работать нормально. Но уродливый.
Вопрос двоякий:
- Есть ли способ сделать это в IE так же круто, как в Chrome? БЕЗ неприятных флеш /java дерьма. Только элементы html и javascript.
- Если нет: существует ли способ проверить поддержку form.submit() после открытия диалога из ссылки (кроме
!navigator.contains("MSIE"))?
[2] может улавливать исключение "Access denied", созданное в IE, но потом слишком поздно: пользователь уже открыл диалог и просмотрел фотографию. Ты не хочешь заставить его сделать это снова. (Даже пользователи IE этого не заслуживают.)
PS. Меня интересуют только Chrome 10+, Firefox 3.6+ и IE8 +.
PS. Может быть важно: элемент ввода файла не может находиться где-нибудь рядом с ссылкой, потому что ссылка находится внутри формы и эта форма (должна быть) отделена от формы загрузки файла.
UPDATE
Второе: обнаружите поддержку этого высокотехнологичного поведения, которое не работает в IE. Я не хочу использовать navigator.appName.contains('MSIE'), потому что это не гибко и не обязательно верно.
