隐藏输入图像URL

Question

使用以下代码更改输入文件类型的外观，我只是将输入选择类型更改为图像，我的问题是如何隐藏输入图像URL 的 HTML

<form action="for.php" method="POST" enctype="multipart/form-data">
        <input type="file" name="files[]" multiple id="files" class="hidden"/>
        <input type="submit" id="sub"/>
    </form>

CSS

input[type="file"] {
            border: 1px gray dashed;
            background:no-repeat center gainsboro;
            text-indent: -9999em;
            line-height:3000;
            width: 128px;
            height: 128px;
        }

如何在选择后隐藏图像名称

Answer 1

跳过上面的代码并使用以下代码

<强> HTML

<form action="for.php" method="POST" enctype="multipart/form-data">
        <div class="inputWrapper">
            <input type="file" name="files[]" multiple id="files" class="hidden fileInput"/>
        </div>
        <input type="submit" id="sub">
    </form>

<强> CSS

.inputWrapper {
            overflow: hidden;
            position: relative;
            cursor: pointer;
            background-color: #DDF;
            border: 1px gray dashed;
            background: url('file_add.png') no-repeat center gainsboro;
            text-indent: -9999em;
            width: 200px;
            height: 200px;
        }

        .fileInput {
            cursor: pointer;
            height: 100%;
            position:absolute;
            top: 0;
            right: 0;
            font-size:50px;
        }
        .hidden {
            opacity: 0;
            -moz-opacity: 0;
            filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0)
        }

<强>输出