jquery简单的上传图片预览

html

复制代码

<div id="bcd"></div>
<input type="file" id="abc">

css

复制代码

img {
	width:100px;
	height:100px;
}

js

复制代码

    $(function() {
        $("#abc").change(function(e) {
            var imgBox = e.target;
            uploadImg($('#bcd'), imgBox)
        });

        function uploadImg(element, tag) {
            var file = tag.files[0];
            var imgSrc;
            if (!/image\/\w+/.test(file.type)) {
                alert("看清楚，这个需要图片！");
                return false;
            }
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function() {
                console.log(this.result);
                imgSrc = this.result;
                var imgs = document.createElement("img");
                $(imgs).attr("src", imgSrc);
                element.append(imgs);
            };
        }
    })