2

我正在尝试使用 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);}
    });
4

2 回答 2

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

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

于 2019-11-19T11:07:48.073 回答
0

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

我花了好几个小时才发现。

我希望这可以帮助其他人。

这是 Firebug 显示的代码：

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

于 2014-03-18T18:00:56.683 回答