Question

我使用了以下问题中的以下代码将自定义样式应用于文件上传按钮。

<p id="avatar-upload">
    <label for="file" class="custom-file-upload">
        Browse Files
    </label>
    <input type="file" name="file" id="file" />
    <input type="submit" name="upload" id="upload" value="<?php esc_attr_e( 'Upload Image', 'buddypress' ); ?>" />
    <input type="hidden" name="action" id="action" value="bp_avatar_upload" />
</p>

css是：

input[type="file"] {
    display: none;
}

我可以点击这个标签，它会调出文件上传模式。但是，当我选择文件并单击“确定”时，前端不再显示文件名，因此用户不会知道单击“上载图像”。我已经在Firefox和Chrome中测试过相同的结果。

Answer 1

几周前，我已经制作了这个。希望它有所帮助。

Codepen：http://codepen.io/mbrillaud/pen/dPdKOG

HTML：

<div class="wrapper">
    <h1>Stylized file input</h1>
    <label class="mybutton" for="fileupload">Button</label>
    <input class="fileupload" id="fileupload" type="file"/>
    <p id="fileinfo"><span></span></p>
</div>

SCSS：

$wetAsphalt: #34495e;
$pumpkin: #d35400;
$clouds: #ecf0f1;
$width: 300px;

body{
    font-family: arial, sans-serif;
    background-color: $wetAsphalt;
}

.wrapper{
    width: $width;
    padding: 12px;
    background-color: $clouds;
    margin: 0 auto;
    @include border-radius(5px);

   .fileupload{
        visibility: hidden;
   }
   .mybutton{
       display: block;
       width: 100px;
       text-align: center;
       margin: 0 auto;
       border-radius: 2px;
       padding: 6px;
       background-color: $pumpkin;
       font-size: 32px;
       color: white;
       cursor: pointer;
       @include user-select(none);
   }

   #fileinfo{
   height: 20px;
   text-align: center;
   }
}

JS（只是为了得到输入值）：

$('#fileupload').on('change', function(){
    $('#fileinfo').text($(this).val());
});

Answer 2

不知道这是否会有所帮助，但对于我上传的内容，我使用了一个名为“uploadifive”的脚本。它会上传到您的网络服务器上的特定区域，然后您可以创建文件视图系统以查看上传图像。

该按钮是否也绑定到事件？

编辑::只是注意到SAI的评论

Answer 3

当您提到跨浏览器解决方案时，会建议我们在其中一个应用中执行的操作。

默认输入文件框在各种浏览器上看起来不同，因此网页外观不同会损害美观。我们所做的是一个隐藏在不可见范围内的输入文件和一个向用户显示的自定义按钮。可见按钮将有一个onclick动作，以编程方式单击隐藏的输入文件字段。

这是一个古老的解决方案，但现在可能会出现更好的事情。

自定义，跨浏览器文件上传按钮

3 个答案: