边缘浏览器隐藏默认文件上传答案

【问题标题】：Edge Browser Hide Default File Upload边缘浏览器隐藏默认文件上传
【发布时间】：2020-04-01 06:15:57
【问题描述】：

我有一个名为 DataJuggler.Blazor.FileUpload 的开源项目和 Nuget 包 (https://github.com/DataJuggler/BlazorFileUpload)

使用 Chrome，以下工作可显示文件上传的自定义按钮：

 <FileUpload CustomSuccessMessage="Your file uploaded successfully." OnChange="OnFileUploaded"
    OnReset="OnReset" ResetButtonClassName="localbutton"
    ShowStatus="false"  PartialGuidLength="10" MaxFileSize=@UploadLimit FilterByExtension="true" 
    ShowCustomButton="true"  ButtonText="Start" CustomButtonClassName="startbutton" 
    AllowedExtensions=".jpg;.png;" ShowResetButton="false" 
    CustomExtensionMessage="Only .jpg and .png files are allowed." 
    AppendPartialGuid="true" InputFileClassName="customfileupload" 
    FileTooLargeMessage=@FileTooLargeMessage>
</FileUpload>

.customfileupload
{  
    display: inline-block;
    cursor: pointer;
    height:48px;
    min-height: 48px;
    visibility: hidden;
    display: none;
    position: fixed;
    left: 0px;
    top: 0px;
}

.startbutton
{
    position: fixed;
    background-color: transparent;
    border: 0px;
    outline: none;
    background-image: url('../images/StartButton.png');
    background-repeat: no-repeat;
    top: 36vh;
    left: 50%;
    width: 28%;
    height: 28%;
    background-size: 100%;
    margin-left: -14%;
    cursor: pointer;
}

而这一点 CSS 隐藏了 Chrome 上的默认文件输入

input[type=file], /* FF, IE7+, chrome (except button) */
input[type=file]::-webkit-file-upload-button 
{ /* chromes and blink button */
    cursor: pointer;
    display: none;
}

在 Chrome 上，标准文件输入是隐藏的，但在 Edge 上会显示：

谢谢，我不经常使用 Edge，但我想知道如何为使用 Edge 的用户修复它。

【问题讨论】：

即使我无法在边缘测试它，所以你可以在你的input 类型 css 中尝试这个：背景颜色：透明；红色;字体大小：40px；边距：0； -webkit-transition：所有 0.3s 缓和 0s； -moz-transition：所有 0.3s 缓和 0s； -o-transition：所有 0.3s 缓和 0s；过渡：所有 0.3s 缓和 0s；光标：指针；
您是否尝试过仅在输入中使用“隐藏”属性 - 应该适用于所有当前浏览器...caniuse.com/#search=hidden
先生。 Magoo，我刚刚尝试了您的解决方案，它奏效了。我试图使用所有 CSS，这就是为什么我在您回答后等待了一周，但我只是重构了我的组件以具有 if ( Visible ) 我在没有隐藏属性的情况下显示它，如果 Visible 为 false 我用隐藏属性显示它.非常感谢，我在答案部分发帖只是为了粘贴代码示例。

标签： c# css blazor

【解决方案1】：

感谢 Magoo 先生，我根据可见参数重构了我的组件以使用或不使用隐藏属性：

[Parameter] public bool Visible { get; set; } = true;

然后在标记中我根据 Visible 的值渲染与否：

@if (Visible)
{
    <input type="file" class="@InputFileClassName" @ref="inputFileElement" 
            @attributes="UnmatchedParameters" />
}
else
{
    <input type="file" class="@InputFileClassName" @ref="inputFileElement" 
            @attributes="UnmatchedParameters" hidden />
}

我在包装器组件中添加了一个 Visible 属性，现在为了使用它，我将 Visible=false 设置为我不希望出现默认输入的情况，它适用于 Chrome 和 Edge。我还没有测试过 Firefox，但我想它也可以在那里工作。

再次感谢 Magoo 先生。有趣的是，对于曾经赌我打 9 球或 1 个口袋的人来说，Magoo 先生是我以前听到的更好的人之一。

【讨论】：