通过layer普通的弹窗来实现图片上传并且在选中图片时展示

通过layer普通的弹窗来实现图片上传,当我们选中图片时还会将图片展示到弹框中,让上传者可以知道知道上传的图片是什么样子。我对图片的宽度和高度是做了限制的,宽度不能大于100px、最小宽度不能小于30px、高度不能大于60px。

/**
 * LOGO图片上传
 */
function uploadLogo() {
    var w = ''15%'';
    if ($(window).width() <= 1500) {
        w = ''20%'';
        if ($(window).width() <= 768) w = ''100%'';
    }
    var form = ''<form id="logoForm" action="users/logoUpload" method="post">'' +
        ''<input type="file" accept="image/*" name="logos" id="logos" multiple="multiple"/></form>'';

    layer.open({
        type: 1,
        title: "<b>请选择LOGO图片</b>",
        id: "uploadLogo1",
        resize: false,
        area: [w, ''30%''],
        content: ''<div id="logos_div">'' + form + ''<br/></div>'',
        success: function () {
            logosChange();
        },
        btn: [''上传'', ''关闭''],
        yes: function (index) {
            if ($("#logos")[0].files.length == 0) {
                layer.msg("至少选择一个LOGO图片");
                return;
            }
            var flagMaxSize = false;//最大尺寸
            var flagMinSize = false;//最小尺寸
            for (var i = 0; i < $("#logos_div img").length; i++) {
                var image = $("#logos_div img")[i];
                if (image.naturalWidth > 100) flagMaxSize = true;
                if (image.naturalHeight > 60) flagMaxSize = true;
                if (image.naturalWidth < 30) flagMinSize = true;
            }

            if (flagMaxSize) {
                layer.msg("LOGO图片宽度不能大于100px,高度不能大于60px");
                return false;
            }
            if (flagMinSize) {
                layer.msg("LOGO图片宽度不能小于20px");
                return false;
            }
            var msgIndex = loadMsg("正在上传中,请稍后...");
            $(''#logoForm'').ajaxSubmit({
                success: function (data) {
                    layer.close(msgIndex);
                    layer.msg(data);
                    layer.close(index);
                }
            });
        }
    });
}

/**
 * 选择图片时,会显示图片的样子
 */
function logosChange() {
    $("#logos").change(function () {
        $("#logos_div img").remove();//每次重新选择图片时清空上一次的选择
        for (var i = 0; i < this.files.length; i++) {
            var file = this.files.item(i);
            var path = window.URL.createObjectURL(file);
            var img = ''<img src="'' + path + ''" style="width: 48%;margin-left: 1%"/>'';
            if (/^image/.test(file.type)) {
                if (i != 0 && i % 2 == 0) {
                    $("#logos_div").append("<div style=''margin-top: 5px''></div>");
                    $("#logos_div").append(img);
                } else {
                    $("#logos_div").append(img);
                }
            } else {
                layer.msg("包含无效的图片文件,请重新选择");
                $("#logos_div img").remove();//每次重新选择图片时清空上一次的选择
                $("#logos").val("");
                return false;
            }
        }
    });
}