настраиваемая кнопка просмотра

Question

Есть ли способ открыть диалоговое окно файла для загрузки файла, по нажатию кнопки или изображения, или ссылки ..

например:

<a href="" onclick="openDialogBox('fileID')....." /> Select File To Upload</a>
<input type="file" id="fileID" />

Iнужен простой пример, который будет работать во всех браузерах.Я хотел бы использовать чистый JavaScript или AJAX.

Answer 1

Вот как я справился только с HTML и CSS

(и я думаю, что нет необходимости вызывать любой javascript через):

<style>
    span.browse_but { font-family:Arial; width:65px; height:20px; text-align:center; line-height:18px; margin:0px; font-size:10px; font-weight:bold;
                        border:1px solid #ccc; float:left; cursor:pointer; padding:0px; background:#eee; display:block; float:left; overflow:hidden; }
    span.browse_but font { font-size:16px; color:#c00; }
    span.browse_but input { position:absolute; cursor:pointer; right:0px; top:0px; height:20px; width:195px; margin:0px; opacity:0; filter:alpha(opacity=0); }
</style>

<span style="position:relative;" class="browse_but">
    <font style="font-weight:bold; color:#093; position:relative; top:2px; font-size:17px;">+</font> Pick a file
    <input name="F" type="file" value=""/>
</span>

См. Скрипку здесь: Разобраться с некрасивой кнопкой обзора

Стратегия состоит в том, чтобы сделать файл-ввод с непрозрачностью = 0 и позицией: абсолютный внутри контейнера с позицией: относительный.Таким образом, входные данные были невидимы для пользователя, но когда они щелкают контейнер, событие щелчка ввода будет запускаться, как и ожидалось.

Что вы можете сделать, чтобы это соответствовало вашим собственным потребностям:

• Вставьте нужное изображение в контейнер и поместите его должным образом;
• Измените размер файла ввода и контейнера, чтобы соответствовать изображению;

Удачи!

Answer 2

Да, это возможно, AJAX не имеет значения.Код будет выглядеть следующим образом:

<a href="#" onclick="document.getElementById('fileID').click(); return false;" /> Select File To Upload</a>

Он может не работать в определенных браузерах, быстрый тест , который я написал, работал нормально на Chrome 15 (бета), IE9 и Firefox 6, поэтому я думаю, что это охватываетбольшинство современных браузеров.