美化文件选择框

发表于 | 分类于 |

效果预览

美化后

美化前

原生代码

1
<input type="file"/>

美化思路

  1. 隐藏原生的丑陋的文件选择框。
  2. 画一个漂亮的假的”文件选择框”。
  3. 监听假文件选择框的click事件，在事件中触发真的文件选择框的click事件，此时会弹出文件选择。
  4. 监听真的文件选择框的change事件，当文件改变时把文件（图片）显示在假文件选择框的位置，又叫做预览。

实现代码

CSS样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
.file {
    width: 230px;
    height: 160px;
    border: 1px dashed #ccc;
    border-radius: 8px;
    cursor: pointer;
}

.file:hover {
    border: 1px dashed #a72c11;
}

#previewImg {
    width: 230px;
    height: 160px;
}

.file-label {
    text-align: center;
    line-height: 160px;
    color: #999;
}

.file-label:hover {
    color: #a72c11;
}

.file-warn {
    font-size: 12px;
    color: #aaa;
    line-height: 1.8;
}

.hidden {
    display: none;
}

html代码：

1
2
3
4
5
6
7
8
9
10
<div class="file">
    <img id="previewImg" class="hidden"/>
    <div class="file-label">上传视频封面</div>
    <input type="file" id="cover" class="hidden" name="file"/>
</div>
<p class="file-warn">
    请上传 jpeg,jpg,png,gif 格式的图片文件，文件大小不能超过2MB。<br/>
    建议上传一张 230*160 像素或等比例的图片。<br/>
    精美封面图有助于吸引观看，并且更易获得官方推荐。<br/>
</p>

js代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<script src="../static/libs/jquery/jquery-1.8.3.min.js"></script>
<script>
    $(function () {
        // 点击上传图片
        $(".file-label").click(function () {
            document.getElementById("cover").click();
        });
        // 点击上传图片
        $("#previewImg").click(function () {
            document.getElementById("cover").click();
        });

        // 图片改变事件
        $("#cover").change(function () {
            var pic = this.files[0];
            // 校验
            if (!validPic(pic)) {
                return;
            }

            // 图片预览
            previewImg(pic);
        });

        // 图片预览
        function previewImg(pic) {
            var r = new FileReader();
            r.readAsDataURL(pic);

            r.onload = function () {
                $("#previewImg").attr("src", this.result).show();
                $(".file-label").hide();
            }
        }
    })
</script>