在div中实现图片插入与删除并计算图片大小

说明：
div中插入和删除图片并计算图片大小
div设置属性contenteditable="true"
div删除图片也提供相应的提示

1、javascript模块化源码

            var DivImg = (function () {
            var DivImg = {}; DivImg.ImgName = []; DivImg.ImgSize = [];
            DivImg.Count = function () {
                return DivImg.ImgName.length;
            }
            DivImg.Size = function () {
                var size = 0;
                for (var i = 0; i < DivImg.ImgSize.length; i++) {
                    size += DivImg.ImgSize[i];
                }
                return size;
            }
            DivImg.IsImgName=function(imgName){
                for (var i = 0; i < DivImg.ImgName.length; i++) {
                    if(imgName==DivImg.ImgName[i]){
                        return true;
                    }
                }
                return false;
            }
            DivImg.SelestFile = function (SelectFileId,divimg) {
                var SelestFile = GetElemById(SelectFileId);
                SelectFile.addEventListener('change', function (e) {
                    var file = e.target.files[0];
                    if (file.type != "image/jpeg") {
                        alert("请确保图像类型为jpg格式"); return;
                    }
                    var reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.onload = function () {
                        var result = reader.result;
                        if (DivImg.IsImgName(file.name)) {
                            alert("不能插入相同的图片名"); return;//存在
                        }
                        if (DivImg.Count() > 6) {
                            alert("最多只能插入7张图片"); return;
                        }
                        DivImg.ImgName.push(file.name);
                        DivImg.ImgSize.push(dataURLtoBlob(result).size);
                        var div = GetElemById(divimg);
                        div.innerHTML += '<img id=' + file.name + ' src='+ result + ' style="height: 110px;width:114px;"/>';
                    }
                }, false);
            };
            DivImg.DivInput = function (divimg, imgmsg) {
                var div = GetElemById(divimg);
                div.addEventListener("input", function (e) {
                    var div = document.getElementById(e.target.id).innerHTML;
                    div = div.replace(" ", "");
                    len = div.match(new RegExp("<img", "g"));
                    var txt = new RegExp(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\.]/g);//判断英文
                    if (!txt.test(div)) {
                        GetElemById(imgmsg).textContent = "只能插入图片";
                        document.getElementById(divimg).innerHTML = "";
                    }
                    txt = new RegExp("[\\u4E00-\\u9FFF]+", "g");
                    if (!txt.test(div)) {
                        GetElemById(imgmsg).textContent = "只能插入图片";
                        document.getElementById(divimg).innerHTML = "";
                    }
                    div = div.split("<img");
                    DivImg.ImgSize.splice(0, DivImg.ImgSize.length);
                    DivImg.ImgName.splice(0, DivImg.ImgName.length);
                    for (var i = 1; i < div.length; i++) {
                        var start = div[i].indexOf("src="),
                        end = div[i].indexOf("style=");
                        var base64 = div[i].substring(start + 5, end - 2);
                        var size = dataURLtoBlob(base64).size;
                        DivImg.ImgSize.push(size);
                        var name = div[i].substring(div[i].indexOf("id=") + 4, start - 2);
                        DivImg.ImgName.push(name);
                    }
                    GetElemById(imgmsg).textContent = "你已经插入第：" + DivImg.Count() +
                                    "张图片！总共大小：" + DivImg.Size() / 1024 + "k";
                }, false);
            }
            DivImg.DOMNodeInserted = function (divimg, imgmsg) {
                var div = GetElemById(divimg);
                div.addEventListener("DOMNodeInserted", function () {
                    var div = document.getElementById(divimg).innerHTML;
                    len = div.match(new RegExp("<img", "g"));
                    if (len == null) {

                    } else {
                        if (len.length > 7) {

                        } else {
                            GetElemById(imgmsg).textContent = "你已经插入第：" + DivImg.Count() +
                                       "张图片！总共大小：" + DivImg.Size() / 1024 + "k";
                        }
                    }
                }, false);
            }
            //base64 转成二进制
            this.dataURLtoBlob=function(dataurl) {
                var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                  bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
                while (n--) {
                    u8arr[n] = bstr.charCodeAt(n);
                }
                return new Blob([u8arr], { type: mime });
            }
            this.GetElemById = function (id) {
                return document.getElementById(id);
            }
            this.SetFileReader = function (file) {
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function () {
                    reader.result;
                    file.name;
                }
            }
            return {
                SelestFile: DivImg.SelestFile,
                DivInput: DivImg.DivInput,
                DOMNodeInserted: DivImg.DOMNodeInserted,

            }
        })();

2、方法使用

   window.onload = function () {
            DivImg.SelestFile("SelestFile", "divimg");
            DivImg.DivInput("divimg", "imgMsg");
            DivImg.DOMNodeInserted("divimg", "imgMsg");
        }