Блог

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

например :

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

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

Именно так я работал только с 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>
  

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

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

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

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

Удачи!

Да, это возможно, AJAX не имеет значения. Код будет:

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

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