web-dev-qa-db-ja.com

Uploadifyボタン：CSSを使ったスタイル？

ploadify ボタン（アップ/オーバー/ダウンの状態を含むグラフィック）を単純なCSSスタイルのボタンに置​​き換えることはできますか？

jquerycssuploadify
27
Herb Caudill

私はこれに対する実用的な解決策を思いつくことができました。基本的な概要は次のとおりです。

  • Uploadifyボタンの画像を無効にする_buttonImg: " "_
  • フラッシュオブジェクトを透明にする_wmode:"transparent"_
  • CSSを使用して、偽のスタイルのbuttonまたはaタグをflashオブジェクトの後ろに配置します
  • Uploadifyを初期化した後、オブジェクトの幅と高さを背後のボタンと一致するように設定します

Flashオブジェクトは、その下のボタンをマウスオーバーなどのイベントから保護します。ホバー効果を得るには、さらにいくつかの手順を実行する必要があります。

  • ボタンとアップロードオブジェクトの両方をdivでラップする
  • Uploadifyを初期化した後、ラッパーdivの幅と高さをボタンに合わせて設定します
  • 次に、jQueryを使用して、ラッパーdivで.hover()イベントを処理し、ボタンにスタイルを適用できます

すべてを一緒に入れて：

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");
});
_
21
Herb Caudill

私は非常にシンプルなもので済むことができました。

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がそれを知っているかどうかはわかりません。

[〜＃〜] update [〜＃〜]この回答は2010年7月に書きました。現在2013年3月です。HTML5は複数のファイルのアップロードをサポートしています。 uploadifyを使用しないでください。私はしません。

32
Evan Carroll

なぜ次のようにラッパーを配置しないのですか？

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

私には有効です;）...そしてもちろん、色の代わりに背景画像を使用することもできます。

7
sebastian

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());
4
buzoganylaszlo

エヴァンは非常に近かったが、それが正しく機能するようにいくつかの調整を行う必要がありました。これが私が最終的に使用したものです：

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
Hawkee

あなたの答えを読んで私はこれをこのように解決するのに役立ちました

  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ファイルを少し変更する必要がありました。

2
Vinicio Barrantes

サラム。 Uploadifyバージョン3.2.1の場合：スタイルシートファイルを編集できますuploadify.cssこのクラス：

  • .uploadify-button
  • .uploadify：hover .uploadify-button

私の場合、私はそれらのすべてのスタイルにコメントしてボタンの背景と境界を削除し、デフォルトのボタンは完全に非表示でした。

2
Sayed Abolfazl Fatemi

本当に簡単な方法は、フラッシュでファイルを開くことです

次に、シンボルUploadBtnの背景色を変更できます。

Swfを保存して公開します。

2
George Filippakos