简单获取input file 选中的图片，并在一个div的img里面赋值src实现预览

html

<a href="javascript:;" class="file-up fl">
    上传封面<input type="file" class="fileCon" />
</a>
<div class="fileImg">
    <img class="img1" src=""  /> 
</div>

css

.file-up{
    display: block;
    color:#fff;
    font-size:1.125rem;
    width:10%;
    text-align:center;
    height:22px;
    line-height:22px;
    background:#169bd5;
    border-radius:8px;
    position: relative;
    margin-bottom:10px;
    margin-top:4px;
}
.fileCon{width:100%;height:100%;display: block;position: absolute;top:0;left:0;opacity: 0;}
.cover-tip{display: block;width:100%;line-height:18px;color:#999;font-size:1rem;position: absolute;top:36px;left:10%;}
.fileImg{display:none;width:1000px;max-height:564px;border-radius:8px;overflow: hidden;margin-left:12%;width:88%;padding-top:30px;}
.fileImg .img1{width:1000px;height:562px;border-radius:8px;border: 1px solid #f2f2f2;}

js

$(function (){
	$(".fileCon").change(function (){
		$(this).parent().siblings(".fileImg").css("display","block");
		//简单获取input file 选中的图片，并在一个div的img里面赋值src实现预览
		var $file = $(this);
        var fileObj = $file[0];
        var windowURL = window.URL || window.webkitURL;
        var dataURL;
        var $img = $(".img1");

        if (fileObj && fileObj.files && fileObj.files[0]) {
            dataURL = windowURL.createObjectURL(fileObj.files[0]);
            $img.attr('src', dataURL);
        } else {
            dataURL = $file.val();
            var imgObj = document.getElementsByClassName("img1")[0];
            // 两个坑:
            // 1、在设置filter属性时，元素必须已经存在在DOM树中，动态创建的Node，也需要在设置属性前加入到DOM中，先设置属性在加入，无效；
            // 2、src属性需要像下面的方式添加，上面的两种方式添加，无效；
            imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
            imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
	    }
        
	});
});