JavaScript点击图片显示原图像大小

说明JavaScript点击图片显示原图像大小，通过弹出框显示。需要引用jquery.js和layer.js类库。

 

1、JavaScript模块化源码

   var Img = (function () {
            var img = {};
            img.SelectFile = function (SelectFile, divimg) {
                var SelectFile = document.getElementById(SelectFile);
                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;
                        
                        var divimg = document.getElementById("divimg");
                        divimg.innerHTML = "";
                        divimg.innerHTML = '<img id=" + file.name + " style="width: 100px; height: 200px;" src=" + result + " alt="" />

                        var img = new Image();
                        img.src = reader.result;
                        img.onload = function () {
                            var w = img.width;
                            var h = img.height;
                            var imgfile = document.getElementById(file.name);
                            var that = imgfile;
                            imgfile.onclick = function () {
                                //页面层
                                layer.open({
                                    title:'原图像大小',
                                    type: 1,
                                    skin: 'layui-layer-rim', //加上边框
                                    area: ['80%', '80%'], //宽高
                                    content: '<img id=" + that.id + " style="width: '+w+'px; height: '+h+'px;" src=" + that.src
                                    + " alt="" />
                                });
                            }
                        }
                    }
                });
            }
            return{
                SelectFile:img.SelectFile,
            }
        })();

2、方法使用

  window.onload = function () {
            Img.SelectFile("SelectFile", "divimg")
        }