Layui表格内图片渲染以及上传图片到数据库（下）

文献种类：专题技术文献;
开发工具与关键技术：VS

上篇是指layui表格内图片渲染，那么这里是将图上在layui表格内上传到数据库中
一样的先看最终实现效果

1.没有图片点击上传即打开选择文件
2.双击选择文件，上传到数据库
3.注意判断上传的图片格式是否正确，以及上传后压缩图片

看代码实现过程

这里是基于上篇的相同部分这里只是放出来让其更明白怎么个过程


控制器



接下来就是页面的一些正则判断以及上传的时候压缩一下图片

-------------------------    html  ---------------------------------
<div class="layui-fluid contanerBox">
        <div class="layui-row">
            <div class="layui-col-md12" id="rightBox">
                <fieldset class="layui-elem-field" style="float:right" id="Fieldset">
                    <input type="text" name="studentID" class="layui-input" style="display:none" id="wuziid">
                    <legend>设置考生</legend>
                    <div class="layui-field-box" id="TableCss">
                        <table id="demo" lay-filter="test"></table>
                    </div>
                </fieldset>
            </div>
        </div>
    </div>
    <form style="display:none;" enctype="multipart/form-data" id="photoInsert" action="" method="post">
        <input type="file" style="display:none;" id="photoNew" onchange="loadImg()" accept="image/png,image/jpg,image/bmp,image/JPEG" />
    </form>
-----------------------  JS  -------------------------------------
 //表格内上传图片
        function TableUpload(id) { 
            window.event.stopPropagation();
            $("#photoNew").click();
            //处理load事件。该事件在读取操作完成时触发
            reader.onload = function (evt) { //onload 为FileReader接口的一个事件 成功读取
                src = evt.target.result;
                var img = new Image();
                img.src = src;
                img.onload = function () { 
                    var data = compress(img);
                    $.post("uploadPic",//方法名
                        { 
                            id: id,//传参
                            pic: data
                        }, function (data) { 
                        if (data != "") { 
                            table.reload("idTest");//重载表格
                            layer.msg(data, {  offset: '150px' });
                        }
                    });
                }
            };
        }
        //表格内上传后保存图片(改变事件)
        function loadImg() { 
            var file = $("#photoNew").get(0).files[0];
            if (!rFilter.test(file.type)) { //判断文件是否是图片类型
                layer.alert("选择的不是一个有效的图片文件");
            } else { 
                reader.readAsDataURL(file);//readAsDataURL是 FileReader接口的方法 将文件读取为DataURL
            }
        }

        //正则表达式判断是否是图片
        var reader = new FileReader();//html5 FileReader接口
        //FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据
        rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
        var formdata;
        //显示图片
        function loadImgToEimg() { 
            var file = $("#photoOneP").get(0).files[0];
            if (!rFilter.test(file.type)) { //判断文件是否是图片类型
                layer.alert("选择的不是一个有效的图片文件");
            } else { 
                reader.readAsDataURL(file);//readAsDataURL是 FileReader接口的方法 将文件读取为DataURL
            }
        }


        //压缩方法
        function compress(img) { 
            var canvas = document.createElement("canvas");
            var ctx = canvas.getContext('2d');
            var tCanvas = document.createElement("canvas");
            var tctx = tCanvas.getContext("2d");
            var initSize = img.src.length;
            var width = img.width;
            var height = img.height;
            //如果图片大于四百万像素，计算压缩比并将大小压至400万以下
            var ratio;
            if ((ratio = width * height / 4000000) > 1) { 
                ratio = Math.sqrt(ratio);
                width /= ratio; 
                height /= ratio;
            } else { 
                ratio = 1;
            }
            canvas.width = width;
            canvas.height = height;
            //铺底色
            ctx.fillStyle = "#fff";
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            //如果图片像素大于100万则使用瓦片绘制
            var count;
            if ((count = width * height / 1000000) > 1) { 
                count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片
                //计算每块瓦片的宽和高
                var nw = ~~(width / count);
                var nh = ~~(height / count);
                tCanvas.width = nw;
                tCanvas.height = nh;
                for (var i = 0; i < count; i++) { 
                    for (var j = 0; j < count; j++) { 
                        tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh);
                        ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);
                    }
                }
            } else { 
                ctx.drawImage(img, 0, 0, width, height);
            }
            //进行最小压缩
            var ndata = canvas.toDataURL('image/jpeg', 0.6);//0~1 值越小压缩的越小，0.6是比较标准的，0.6压缩的图片不会失真，如果也失真，那就试着调高点
            //console.log('压缩前：' + initSize);
            //console.log('压缩后：' + ndata.length);
            //console.log('压缩率：' + ~~(100 * (initSize - ndata.length) / initSize) + "%");
            tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
            return ndata;
        }
-------------------------------  控制器  ---------------------
/// <summary>
        /// 表格上传图片
        /// </summary>
        /// <param name="pic"></param>
        /// <param name="id"></param>
        /// <returns></returns>
        public ActionResult uploadPic(string pic, int id)
        { 
            try
            { 
                if (!string.IsNullOrEmpty(pic))
                { 
                    PW_Student data = FindWuZiXinXiById(id);
                    if (pic != "")
                    { 
                        byte[] newFile = Base64ToByte(pic);
                        data.StudentPicture = newFile;
                        myModels.Entry(data).State = System.Data.Entity.EntityState.Modified;
                        myModels.SaveChanges();
                        return Json("上传成功！", JsonRequestBehavior.AllowGet);
                    }
                }
                return Json("", JsonRequestBehavior.AllowGet);
            }
            catch (Exception)
            { 
                return Json("", JsonRequestBehavior.AllowGet);
            }
        }

/// <summary>
        /// 根据id查询信息
        /// </summary>
        /// <param name="id"></param>
        /// <returns></returns>
        public PW_Student FindWuZiXinXiById(int id)
        { 
            try
            { 
                PW_Student data = myModels.PW_Student.Where(m => m.studentID == id).SingleOrDefault();
                if (data != null)
                { 
                    return data;
                }
                return null;

            }
            catch (Exception)
            { 
                return null;
            }
        }

 /// <summary>
        /// 转换
        /// </summary>
        /// <param name="base64str"></param>
        /// <returns></returns>
        public byte[] Base64ToByte(string base64str)
        { 
            byte[] bytes = null;
            try
            { 
                var imgData = base64str.Split(',')[1];
                //过滤特殊字符即可 
                string dummyData = imgData.Trim().Replace("%", "").Replace(",", "").Replace(" ", "+");
                if (dummyData.Length % 4 > 0)
                { 
                    dummyData = dummyData.PadRight(dummyData.Length + 4 - dummyData.Length % 4, '=');
                }
                bytes = Convert.FromBase64String(dummyData);
                return bytes;
            }
            catch (Exception)
            { 
                return bytes;
            }
        }