2014-03-01 54 views
2

我想使用UploadiFive插件自定義「選擇文件」按鈕,並且所有工作都正常,但只有按鈕區域的一部分能夠打開「加載對話框」。使用UploadiFive插件的自定義按鈕

只有上部區域有效。如果按鈕的高度爲35像素,則只有上面的15像素可以完成這項工作。怎麼了?

CSS:

.uploadifive-button { 
padding:5px 20px; 
background-color:#1F87C4; 
-webkit-border-radius:2px; 
-moz-border-radius:2px; 
border-radius:2px; 
border:1px solid #1A6EA1; 
font-family:Arial, Helvetica, sans-serif; 
color:#FFF; 
font-size:14px; 
text-decoration:none; 
text-align:center; 
margin:0 auto; 
} 
.uploadifive-button:hover { 
    background-color:#1A70A3; 
    border:1px solid #165E8A; 
} 

和Javascript:

$('#file_upload').uploadifive({ 
     'auto'    : true, 
     'buttonText'  : 'Upload Image', 
     'hideButton'  : true, 
     'wmode'    : 'transparent', 
     'formData'   : { 
           'timestamp' : timestamp, 
           'token'  : salt, 
           'dest'  : $('div#dest').html(), 
           'obj'  : $('div#obj').html() 
          }, 
     'queueID'   : 'queue', 
     'removeCompleted' : true, 
     'uploadScript'  : '/upload_image_objet.php', 
     'onUploadComplete' : function(file, data) {update(data);} 
    }); 

回答

0

最後,我可以猜測,與Firebug的檢查,另一個輸入標籤被放置在DOM。所以,解決方案是修改新的輸入樣式,添加新的「寬度」和「高度」。

它花費我很多小時才能發現。

我希望這可以幫助其他人。

下面是螢火蟲示出的代碼:

<input id="file_upload" class="uploadifive-button" name="file_upload" type="file" style="display: none;"/>