带有UploadiFive插件的自定义按钮

Question

我正在尝试使用UploadiFive插件自定义'选择文件'按钮，并且一切正常，但是按钮的仅一部分区域能够打开“加载”对话框。

仅上部区域起作用。如果按钮的高度为35px，则只有上方的15px起作用。怎么了？

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

}）;

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

重要：删除“样式”后设置相对于按钮的位置，否则不起作用！！