在使用javascript上传之前检查图像的宽度和高度？

Question

我在Grid视图中使用FILE Uploader，然后我动态找到了fileuploader的ID。 但问题是iam获取的高度和宽度的值为0。 下面是我使用的代码。

function validateFileSize() {
        debugger;
        for (var i = 1; i < document.getElementById('<%=gvDocuments.ClientID %>').rows.length; i++) {
            var uploadControl = document.getElementById('<%=gvDocuments.ClientID %>').rows[i].cells[3].getElementsByTagName('INPUT')[0].id; //** here i find the ID of File Uploader
            if (document.getElementById('<%=gvDocuments.ClientID %>').rows[i].cells[1].getElementsByTagName('SELECT')[0].value == "18")//** here i find the ID of DropDownlist
             {
                var newImg = new Image();
                newImg.src = document.getElementById(uploadControl).value;
                var height = newImg.height;
                var width = newImg.width;

                alert('The Image Dimension is ' + height + ' X ' + width + '');
            }
        }
    }

Answer 1

如果您使用的是jQuery，并且您要求的图像大小是这样的

检查这个例子

http://jsbin.com/oTAtIpA/3/edit

Answer 2

您只需要检查图像加载功能内部的图像尺寸即可。

例如

newImg.onload = function()
{
    var height = this.height;
    var width = this.width;
    // do stuff with image dimensions
}

另请参阅https://stackoverflow.com/a/626505/53241

LittleDragon的示例还使用纯JavaScript来获取尺寸，而不是jQuery。

Answer 3

     <script type="text/javascript">
            $(function () {
                $("#upload").bind("click", function () {
                    //Get reference of FileUpload.
                    var fileUpload = $("#fileUpload")[0];
                    //Check whether HTML5 is supported.
                    if (typeof (fileUpload.files) != "undefined") {
                        //Initiate the FileReader object.
                        var reader = new FileReader();
                        //Read the contents of Image File.
                        reader.readAsDataURL(fileUpload.files[0]);
                        reader.onload = function (e) {
                            //Initiate the JavaScript Image object.
                            var image = new Image();
                            //Set the Base64 string return from FileReader as source.
                            image.src = e.target.result;
                            image.onload = function () {
                                //Determine the Height and Width.
                                var height = this.height;
                                var width = this.width;
                                if (height > 100 || width > 100) {
                                    alert("Height and Width must not exceed 100px.");
                                    return false;
                                }
                                alert("Uploaded image has valid Height and Width.");
                                return true;
                            };
                        }
                    } else {
                        alert("This browser does not support HTML5.");
                        return false;
                    }
                });
            });
        </script>

 <input type="file" id="fileUpload" />
    <input id="upload" type="button" value="Upload" />

试试这个>