自定义 input file 样式及 js 上传图片本地预览

效果图

自定义 input file 效果预览

使用说明

复制代码，保存为 html 格式后，直接用浏览器打开即可。

代码

html" title=js>js"><!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <title>自定义 input file 样式及 html" title=js>js 上传图片本地预览</title>
        <!-- 图标字体库 -->
        <link href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
        <style type="text/css">
            .file {
                position: relative;
                display: inline-block;
                height: 30px;
                line-height: 30px;
                padding: 0 10px;
                background-color: #009688;
                color: #fff;
                white-space: nowrap;
                text-align: center;
                font-size: 15px;
                border: none;
                border-radius: 2px;
                cursor: pointer;
                vertical-align: middle;
            }

            .file input {
                position: absolute;
                font-size: 100px;
                right: 0;
                top: 0;
                bottom: 0;
                opacity: 0;
            }

            .file:hover {
                opacity:.8;
                filter:alpha(opacity=80);
                color:#fff
            }

            .file:active {
                opacity:1;
                filter:alpha(opacity=100)
            }
        </style>
    </head>
    <body>

        <div id="preview_image" style="padding: 10px 0;"><i class="fa fa-file-image-o" style="font-size: 120px;"></i></div>
        <div class="file">
            <i class="fa fa-cloud-upload fa-lg"></i> 上传图片
            <input name="thumb" type="file" onchange="preview_image(this, 'preview_image')" multiple="multiple">
        </div>

    </body>
    <script type="text/javascript">
        /**
         * 图片上传预览功能
         *
         * @param     file   file           上传的文件
         * @param     string preview_image  上传图片预览id
         */
        function preview_image(file, preview_image) {

            var tip = "仅允许 jpg、png 和 gif 格式图片上传！"; // 提示信息
            var filters = {
                "jpeg": "/9j/4",
                "gif": "R0lGOD",
                "png": "iVBORw"
            }

            var prvbox = document.getElementById(preview_image);
            prvbox.innerHTML = "";
            if (window.FileReader) { // html5方案

                for (var i = 0, f; f = file.files[i]; i++) {

                    var fr = new FileReader();
                    fr.onload = function(e) {

                        var src = e.target.result;
                        if (!validate_image(src)) {
                            alert(tip)
                        }
                        else {
                            show_preview_image(src);
                        }
                    }
                    fr.readAsDataURL(f);
                }
            }
            else { // 降级处理

                if (!/\.jpg$|\.png$|\.gif$/i.test(file.value)) {
                    alert(tip);
                }
                else {
                    show_preview_image(file.value);
                }
            }

            function validate_image(data) {

                var pos = data.indexOf(",") + 1;
                for (var e in filters) {
                    if (data.indexOf(filters[e]) === pos) {
                        return e;
                    }
                }

                return null;
            }

            function show_preview_image(src) {

                var img = document.createElement("img");
                img.src = src;
                prvbox.appendChild(img);
            }
        }
    </script>
</html>