Кнопка загрузки: стиль с CSS? - PullRequest
Новая
       48

Кнопка загрузки: стиль с CSS?

27 голосов
/ 20 марта 2010

Можно ли заменить кнопку Uploadify (представляющую собой изображение, содержащее состояния вверх / вниз / вниз) простой кнопкой в ​​стиле CSS?

Ответы [ 8 ]

32 голосов
/ 02 июля 2010

Мне удалось уйти с чем-то гораздо более простым.

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 вообще; Я не знаю.

21 голосов
/ 20 марта 2010

Мне удалось найти рабочее решение для этого. Вот основная схема:

  • Отключить изображение кнопки Uploadify buttonImg: " "
  • Сделать объект Flash прозрачным wmode:"transparent"
  • Используя CSS, поместите поддельный тег button или a за флэш-объект
  • После инициализации Uploadify установите ширину и высоту объекта в соответствии с кнопкой позади него

Объект вспышки будет защищать кнопку под ним от событий наведения мыши и т. Д .; так, чтобы получить эффекты наведения, вам нужно выполнить несколько дополнительных шагов:

  • Оберните и кнопку, и объект загрузки в div
  • После инициализации Uploadify установите ширину и высоту div-обертки в соответствии с кнопкой
  • Затем вы можете использовать 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");
});
7 голосов
/ 22 февраля 2011

Почему бы просто не обернуть вокруг него Обёртку вот так: 

<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>

у меня работает;) ... и, конечно, вы можете просто использовать фоновые изображения вместо цветов.

4 голосов
/ 02 февраля 2011

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());
2 голосов
/ 16 апреля 2014

Сала. для Uploadify версии 3.2.1: Вы можете редактировать файл таблицы стилей uploadify.css в следующих классах:

  • .uploadify кнопка
  • .uploadify: hover .uploadify-button

В моем случае я комментирую все их стили, чтобы удалить фон и границу кнопки, а кнопка по умолчанию полностью скрыта.

2 голосов
/ 27 марта 2012

Эван был очень близко, но мне нужно было внести некоторые коррективы, чтобы он работал правильно. Вот что я использовал в итоге:

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'
});

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

2 голосов
/ 16 февраля 2012

Очень простой способ открыть файл с помощью Flash

Затем можно изменить цвет фона символа UploadBtn

Сохраните и опубликуйте файл SWF.

2 голосов
/ 27 января 2012

чтение ваших ответов помогло мне решить этот вопрос таким образом

  1. Сначала оберните <input> в <div class=upload-wrap>
  2. Применение стилей к этой новой оболочке (даже: hover)
  3. Используйте параметр 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, чтобы получить цвет и шрифт для моей кнопки

...