Кнопка Uploadify: Стиль с CSS?

Question

Кнопка Uploadify: Стиль с CSS?

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

27

jquery css uploadify

задан Daniel Rikowski 29 September 2011 в 10:36

2 ответа

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

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; Я не.

32

ответ дан 28 November 2019 в 04:30

Другие вопросы по тегам:

jquery css uploadify

Похожие вопросы:

score 21 · Accepted Answer

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

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

Флеш-объект будет экранировать кнопку под ним от событий mouseover и т.д.; поэтому, чтобы получить чтобы получить эффект наведения, вам нужно сделать еще пару шагов:

Заверните и кнопку, и объект upload в 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");
});