Кнопка "Загрузить":Стиль с помощью CSS?
Вопрос
Возможно ли заменить Загрузить ( Uploadify ) кнопка (которая представляет собой графическое изображение, содержащее состояния up / over / down) с простой кнопкой в стиле CSS?
Решение 2
Мне удалось найти рабочее решение этой проблемы.Вот основной план:
- Отключите изображение кнопки Uploadify для загрузки
buttonImg: " "
- Сделайте флэш-объект прозрачным
wmode:"transparent"
- Используя CSS, разместите поддельный стилизованный
button
илиa
метка за флэш-объектом - После инициализации Uploadify установите ширину и высоту объекта так, чтобы они соответствовали кнопке за ним
Объект flash защитит кнопку под ним от наведения курсора мыши и т.д.Мероприятия;итак, чтобы получить эффекты наведения, вам нужно предпринять пару дополнительных шагов:
- Оберните как кнопку, так и объект загрузки в div
- После инициализации Uploadify установите ширину и высоту элемента-оболочки в соответствии с кнопкой
- Затем вы можете использовать jQuery для обработки
.hover()
события в обертке div и применение стилей к кнопке
Собирая все это вместе:
HTML
<div class="UploadifyButtonWrapper">
<a>Upload Files</a>
<div class="UploadifyObjectWrapper">
<input type="file" id="Uploadify" name="Uploadify" />
</div>
</div>
CSS - файл
div.UploadifyButtonWrapper{
position:relative;
}
/* fake button */
div.UploadifyButtonWrapper a {
position:absolute; /* relative to UploadifyButtonWrapper */
top:0;
left:0;
z-index:0;
display:block;
float:left;
border:1px solid gray;
padding:10px;
background:silver;
color:black;
}
/* pass hover effects to button */
div.UploadifyButtonWrapper a.Hover {
background:orange;
color:white;
}
/* position flash button above css button */
div.UploadifyObjectWrapper {
position:relative;
z-index:10;
}
Javascript:
$("input.Uploadify", self).uploadify({
...
buttonImg: " ",
wmode: "transparent",
...
});
var $buttonWrapper = $(".UploadifyButtonWrapper", self);
var $objectWrapper = $(".UploadifyObjectWrapper", self);
var $object = $("object", self);
var $fakeButton = $("a", self);
var width = $fakeButton.outerWidth();
var height = $fakeButton.outerHeight();
$object.attr("width", width).attr("height", height);
$buttonWrapper.css("width", width + "px").css("height", height + "px")
$objectWrapper.hover(function() {
$("a", this).addClass("Hover");
}, function() {
$("a", this).removeClass("Hover");
});
Другие советы
Мне удалось выйти сухим из воды с помощью чего-то гораздо более простого.
xhtml:
<div id="uploadify">
Upload Pictures
<div id="uploadify" type="button" />
</div>
css - файл:
#uploadify object {
position:absolute;
left:0; right:0;
width:100%
}
javascript:
$("#uploadify>div").uploadify({
'hideButton' : true
, 'wmode' : 'transparent'
, 'uploader' : '/static/uploadify/uploadify.swf'
, 'script' : '/static/uploadify.php'
, 'folder' : '/_uploads'
, 'multi' : true
})
// If you're using jQuery UI.
$("#uploadify").button();
Вероятно, немного легче, теперь, когда у нас есть hideButton: true
, не уверен, знал ли @Herb об этом.
Обновить Я написал этот ответ в июле 2010 года.Сейчас март 2013 года.HTML5 поддерживает многократную загрузку файлов.Вообще не используйте uploadify;Я не знаю.
Почему бы просто не обернуть это вот так:
<div class = "uploadWrapper"><input id="file_upload" name="file_upload" type="file" /></div>
Оформите это вот так:
.uploadWrapper object {background-color: red;}
.uploadWrapper object:hover {background-color: blue;}
И используйте следующий скрипт:
<script type="text/javascript">
$(document).ready(function() {
$('#file_upload').uploadify({
'hideButton': true,
'wmode' : 'transparent',
'uploader' : '/uploadify/uploadify.swf',
'script' : '/uploadify/uploadify.php',
'cancelImg' : '/uploadify/cancel.png',
'folder' : '/uploads',
'auto' : true
});
});
</script>
Работает у меня ;) ...и, конечно, вы можете просто использовать фоновые изображения вместо цветов.
100% рабочий пример.Протестировано в Firefox, Chrome, Opera и IE6!
HTML:
<div id="uploadify-wrapper"><div id="uploadify"></div></div>
<span id="btn">Select files to upload</span>
<div id="uploadify-queue"></div>
CSS - файл:
#uploadify-wrapper {position:absolute; overflow:hidden}
JavaScript:
$('#uploadify').uploadify({width:1000, height:1000, hideButton:true, wmode:'transparent', queueID:'uploadify-queue', ...);
$('#uploadify-wrapper').width($('#btn').outerWidth()).height($('#btn').outerHeight());
чтение ваших ответов помогло мне решить эту проблему таким образом
- Сначала заверните
<input>
в<div class=upload-wrap>
- Примените стили к этой новой оболочке (даже: наведите курсор мыши)
- Используйте опцию hiddeButton (Скрытая кнопка)
HTML:
<div class="upload-wrap">
<input id="file_upload" type="file" name="file_upload" />
</div>
CSS - файл:
.upload-wrap{
background:#ff0;
width:133px;
height:36px;
}
.upload-wrap:hover{
background:#f00;
}
JS
$('#file_upload').uploadify({
'uploader' : 'uploadify/uploadify.swf',
'script' : 'uploadify/uploadify.php',
'folder' : 'files/images',
'hideButton' : true,
'wmode' : 'transparent',
'buttonText' : 'Upload something'
'width' : 133,
'height' : 36
});
Таким образом, вы сможете оформить свою кнопку в стиле, оставив доступной опцию buttonText.Мне также пришлось немного повозиться с файлом .fla, чтобы получить цвет и шрифт для моей кнопки
Действительно простой способ - открыть файл с помощью Flash
Затем вы можете изменить цвет фона символа UploadBtn
Сохраните и опубликуйте swf-файл.
Эван был очень близок, но мне нужно было внести некоторые коррективы, чтобы все работало правильно.Вот что я в итоге использовал:
CSS - файл:
#uploadify {
background: #FF5500;
border-radius: 5px;
}
#uploadify:hover {
background: #B33C00;
}
#uploadify object {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 25px;
}
Вероятно, вы хотите точно настроить высоту здесь, потому что это действительно имеет значение.Кроме того, я выровнял его сверху и слева, а не слева и справа из другого примера.Я оставил там небольшой стиль в качестве примера того, как вы можете оформить оболочку кнопки.
HTML:
<div id="uploadify" style="position: relative;">
Upload Screenshots
<div id="uploadify_button" type="button"></div>
</div>
Относительное положение важно для кнопки абсолютного положения внутри.
JavaScript:
$("#uploadify_button").uploadify({
'hideButton' : true,
'wmode' : 'transparent',
'uploader' : '/static/uploadify/uploadify.swf',
'script' : '/static/uploadify.php',
'folder' : '/_uploads',
'multi' : true,
'width' : '140',
'height' : '25'
});
Ширина и высота очень важны, поскольку они определяют фактическую область кликабельности внутри элемента управления кнопкой.Я обнаружил, что без них он доступен только в определенной области.
Салам.для Uploadify Версии 3.2.1:Вы можете отредактировать файл таблицы стилей uploadify.css
в этих классах:
- .кнопка "Подтвердить загрузку "
- .uploadify:наведите указатель мыши на кнопку uploadify .uploadify
в моем случае я комментирую все их стили, чтобы удалить фон и границу кнопки, а кнопка по умолчанию была полностью скрыта.