Кнопка загрузки файла без поля ввода?

Возможный дубликат:
jQuery: имитирующий щелчок по < input type= "file" / > не работает в Firefox?

Возможно ли иметь кнопку файла без ввода по умолчанию? В идеале все, что я хочу, это кнопка, которая позволяет пользователю перейти к файлу, не показывая, что они выбрали до загрузки. После того, как пользователь выберет файл, я отправлю форму следующим образом:

$("#file").change(function() {
    $("#update_button").trigger('click');
});

Я уверен, что это должно быть возможно с помощью некоторой css или магии jquery...

Ответы

Ответ 1

Если я правильно помню, HTML5 позволяет вам вызвать метод click на скрытом элементе ввода, чтобы отобразить диалоговое окно файла с помощью настраиваемой кнопки (почему бы просто не работать без элемента, я не знаю). К сожалению, не все в настоящее время используемые браузеры поддерживают это еще, поэтому вы застряли в стилизации ввода файла, чтобы выглядеть как кнопка.

Это смехотворно уродливый, но гениальный CSS-хак, который я наткнулся на сайте однажды (вероятно, imgur):

.fileupload {
    width: 100px;
    height: 50px;
    position: relative;
    overflow: hidden;
    background: ...; /* and other things to make it pretty */
}

.fileupload input {
    position: absolute;
    top: 0;
    right: 0; /* not left, because only the right part of the input seems to
                 be clickable in some browser I can't remember */
    cursor: pointer;
    opacity: 0.0;
    filter: alpha(opacity=0); /* and all the other old opacity stuff you
                                 want to support */
    font-size: 300px; /* wtf, but apparently the most reliable way to make
                         a large part of the input clickable in most browsers */
    height: 200px;
}

И HTML, чтобы пойти с ним:

<div class="fileupload">
  <input type="file" />
  Any content here, perhaps button text
</div>

Что он делает, так это делает входной файл огромным (изменив размер шрифта (!?)), чтобы он закрывал кнопку, а затем отсекает избыток с помощью overflow: hidden;. Это может не работать для абсолютно огромных кнопок.

Ответ 2

Вы можете просто скрыть кнопку input с помощью visibility: hidden; и присоединить обработчик события клика к другой кнопке:

HTML:

<input type="file" name="somename" size="chars">
<button>Choose File</button>

CSS

input {
    display: block;
    visibility: hidden;
    width: 0;
    height: 0;
}

JavaScript:

$('button').click(function(){
    $('input').click();
});

Здесь скрипка: http://jsfiddle.net/tCzuh/

Ответ 3

Если вы установите непрозрачность на 0, вы можете добавить под ним еще один div, который выглядит как кнопка. Вы можете придать стиль так, как вам нравится.

Пример рабочего кода ниже:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<div class="wrapper">
    <div class="fakeuploadbutton">upload</div>
    <input id="file" type="file" name="file" />
</div>
<script type="text/javascript" charset="utf-8">
    jQuery('#file').css('opacity',0);    
</script>
<style type="text/css" media="screen">
    .wrapper { position: relative; }
    .fakeuploadbutton { 
        background: red url('myuploadbutton.png') no-repeat top left;
        width: 100px; height: 30px;
    }
    #file { 
        position: absolute;
        top: 0px; left: 0px; 
        width: 100px; height: 30px;
    }
</style>