其他分享
首页 > 其他分享> > jquery简单的上传图片预览

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);
            };
        }
    })

标签:jquery,function,预览,imgSrc,imgs,file,reader,var,上传
来源: https://www.cnblogs.com/niuben/p/13728023.html