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

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

14 голосов
/ 04 марта 2011

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

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

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

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

Ответы [ 4 ]

40 голосов
/ 04 марта 2011

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

  • 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's 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 голосов
/ 01 ноября 2013

Простой способ использовать тег «label» и свойство «for».Например, 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/

0 голосов
/ 04 марта 2011

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

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

0 голосов
/ 04 марта 2011

В этом случае лучше всего использовать флэш-загрузчик.Это введет полный отдельный элемент управления и не будет зависеть от браузера.В сети их много.Вот один из них: http://swfupload.org/

...