js 上传图片预览

<li id="li1"><input type="file" style="opacity: 0;width: 100%;height: 4rem;" οnchange="preview(this,'li1')" multiple="multiple" accept="image/x-png, image/jpg, image/jpeg, image/gif" name="images[]"/></li>

//图片上传
var msg = "您可以上传png, jpg, 或者gif格式的图片";
var filter = {
    "jpeg": "/9j/4",
    "gif": "R0lGOD",
    "png": "iVBORw"
};
function preview(file,liid) {
    if (window.FileReader) {
        for (var index=0, f; f = file.files[index]; index++) {
            var filereader = new FileReader();
            filereader.onload = function (event) {
                var srcpath = event.target.result;
                if (!validateImg(srcpath)) {
                    console.log("H5"+msg);
                } else {
                    showPreviewImage(srcpath,liid);
                }
            };
            filereader.readAsDataURL(f);
        }
    } else {
        if (!/\.jpg$|\.png$|\.gif$/i.test(file.value)) {
            console.log("原生"+msg);
        } else {
            showPreviewImage(file.value);
        }
    }
}
function validateImg(data) {
    var pos = data.indexOf(",") + 1;
    for (var e in filter) {
        if (data.indexOf(filter[e]) === pos) {
            return e;
        }
    }
    return null;
}
function showPreviewImage(src,li) {
    var img = document.createElement('img');
    var add = document.getElementById(li);
    img.src = src;
    img.style = "width:64px;height:auto;";
    add.style.backgroundImage="url("+src+")";
    add.style.backgroudSize='auto auto';
    add.style.backgroudRepeat='on-repeat';
}