Кнопка ввода файлов для всех браузеров, возможно ли это?

Можно ли использовать uploadify, чтобы позволить любому пользователю выбирать файл из диалогового окна файла и вставлять его в элемент ввода файла формы? Мне нужно всего лишь использовать функцию добавления в качестве стиля для стиля кнопки "Загрузить" в качестве изображения.

Я пробовал другие подходы здесь, здесь и здесь. Все они не совместимы со всеми браузерами.

Что еще я могу использовать/сделать, чтобы мой элемент ввода файла был как образ?

Я хотел бы, чтобы кнопка ввода файла выглядела последовательной во всех браузерах.

Ответы

Ответ 1

Я не могу вспомнить источник техники, но этот кажется кросс-браузером. Протестировано:

  • Google Chrome 9
  • FireFox 3.6
  • Internet Explorer 6-9
  • Opera 10
  • Safari для Windows

Вот полный код:

HTML:

<div>
    <button><!-- this is skinnable -->Pick a file ...</button>
    <input type="file" />
</div>

CSS

div
{
    position:relative;
    width: 100px;
    height: 30px;
    overflow:hidden;
}

div button
{
    position: absolute;
    width: 100%;
    height: 100%;
}

div input
{
    font: 500px monospace; /* make the input button HUGE */
    opacity:0; /* this will make it transparent */
    filter: alpha(opacity=0); /* transparency for Internet Explorer */
    position: absolute;  /* making it absolute with z-index:1 will place it on top of the button */
    z-index: 1;
    top:0;
    right:0;
    padding:0;
    margin: 0;
}

Идея состоит в том, чтобы сделать <input type="file" /> прозрачным и разместить его поверх некоторого содержимого, пригодного для стилей (в этом случае <button>). Когда конечный пользователь нажимает кнопку, она фактически нажимает кнопку <input type="file" />.

Ответ 2

Простой способ использования метки метки и свойства "для". Как http://jsfiddle.net/Txrs6/, но в этом случае мы не видим выбранного файла. КОД

<label for="inputFile" class="col-sm-3" style="padding-left: 0px;"><a class="btn btn-info">Выбрать...</a></label>`

<input style="display: none;" type="file" id="inputFile">

Другой способ: js http://jsfiddle.net/PZ5Ep/

Ответ 3

Лучше всего в этом случае использовать Flash-загрузчик. Это приведет к полному отдельному контролю и не будет зависеть от браузера. Их много в сети. Здесь один: http://swfupload.org/

Ответ 4

Если это только кнопка загрузки, которую вы хотите создать, почему вы не можете использовать CSS? Это должно работать во всех браузерах.

Если вы поместите свой код в jsFiddle, я могу рассказать вам больше о том, что вы можете сделать.