带有UploadiFive插件的自定义按钮

Question

我正在尝试使用UploadiFive插件自定义“Select”按钮，并且所有的功能都很好，但是只有一部分按钮的区域能够打开Load对话框。

只有上城区才能工作。如果按钮的高度为35 do，则只有上面的15 do才能完成这项工作。怎么了？

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

Answer 1

最后，我可以猜测，使用Firebug进行检查时，另一个输入标记被放置在DOM中。因此，解决方案是修改新的输入样式，添加新的“宽度”和“高度”。

我花了很多时间才发现。

我希望这能帮到其他人。

下面是Firebug显示的代码：

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

​

Answer 2

这就是解决办法。

$( document ).ready(function() {


    $('#file_upload').uploadifive({
    'buttonText'        : 'Seleziona file',
    'uploadScript' : 'uploadifive.php',
});



$("#uploadifive-file_upload").removeClass('uploadifive-button');
$("#uploadifive-file_upload").removeAttr('style');
$("#uploadifive-file_upload").addClass('btn btn-warning m-btn m-btn--icon');

})；

最后一行是引导4按钮样式的类。

重要事项:移除“样式”后，设置相对于按钮的位置，否则不工作！