<div style="width:200px;">
		<label id="upload">
			<input type="file">
		</label>
	</div>

<script   src="https://code.jquery.com/jquery-2.2.4.min.js"   integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous"></script>
	
	<script type="text/javascript">
    
! function(i) {
    i.fn.loadImg = function(e) {
        var s = {
            fileExt: ["jpg"],
            fileSize: [0, 2]
        }, n = i(this).selector,
            t = (i(n).append('<div class="loader"></div>'), i(n).append("<img>"), "undefined" == typeof e.text ? "Upload" : e.text),
            f = function() {
                i(n).addClass("_cssimg"), i(n).attr("text-file", t), i(n).find("input[type=file]").on("change", function() {
                    i(n).find(".loader").show(), 0 != r(this) && 0 != d(this) && l(this)
                })
            }, l = function(i) {
                if (i.files && i.files[0]) {
                    var e = new FileReader;
                    e.onload = function(i) {
                        setTimeout(a(i.target.result), parseInt(800 * Math.random() + 800))
                    }, e.readAsDataURL(i.files[0])
                }
            }, a = function(e) {
                i(n).find("img").show(), i(n).removeClass("_cssimg"), i(n).addClass("_imgshow"), i(n).find("img").attr("src", e), i(n).find(".loader").hide("slow")
            }, r = function(n) {
                if (n.files && n.files[0]) {
                    var t = n.files[0],
                        f = ["jpg", "gif", "png"];
                    e.fileExt ? listExtensions = e.fileExt : listExtensions = s.fileExt;
                    var l = t.name,
                        a = l.substr(l.lastIndexOf(".") + 1);
                    if (-1 == i.inArray(a, f) || -1 == i.inArray(a, listExtensions)) return o("Invalid file type")
                }
            }, d = function(i) {
                if (i.files && i.files[0]) {
                    var n = i.files[0],
                        t = parseInt(0),
                        f = s.fileSize[0],
                        l = s.fileSize[1],
                        a = parseInt(1053633);
                    if (e.fileSize_min && (f = e.fileSize_min), e.fileSize_max && (l = e.fileSize_max), n.size && (t = n.size), n.size < parseInt(f * a) || n.size > parseInt(l * a)) return o("Invalid file size")
                }
            }, o = function(e) {
                return i(n).find("img").hide(), i(n).find(".loader").hide("slow"), i(n).removeClass("_imgshow"), i(n).addClass("_cssimg"), !1
            };
        f()
    }
}(jQuery); 
    
		$('#upload').loadImg({
			"text"			: "画像がここにプレビューされます",
			"fileExt"		: ["png","jpg"],
			"fileSize_min"	: 0,
			"fileSize_max"	: 2
		});
	</script>

._cssimg,.loader {
    position: absolute
}

._cssimg input[type=file],._imgshow input[type=file],.loader {
    display: none
}

._cssimg {
    color: #b9b9b9;
    border: 3px dashed #e8e8e8;
    padding: 5%;
    line-height: 3;
    margin: 5px 1%;
    cursor: pointer;
    border-radius: 10px;
    text-shadow: 1px 1px 1px #fff;
    background-color: rgba(234,234,234,.35);
    font-family: sans-serif;
    opacity: .7
}

._cssimg:hover {
    opacity: 1
}

._cssimg:before {
    content: attr(text-file)
}

._imgshow {
    cursor: pointer;
    width: 100%;
    opacity: .9
}

._imgshow:hover {
    opacity: 1
}

._imgshow img {
    border: 1px solid silver;
    border-radius: 10px;
    background-color: #fff;
    padding: 2px;
    max-width: 100%;
    min-width: 100%
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js