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按钮样式的类。

重要提示：删除“样式”后设置相对于按钮的位置，否则无效！

带UploadiFive插件的自定义按钮

2 个答案: