输入图像文件宽度;高度

时间:2014-03-26 07:09:14

标签: jquery asp.net-mvc

我希望在更新之前获得输入文件图像的宽度和高度。它更好地进入变化。但我无法得到实际的宽度和高度。

这是cshtml代码:

这里" imgIdentityPicture"是图像视图框

<div class="col-md-2 col-md-offset-1">
                            <input type="file" name="IdentityPicture" id="IdentityPicture" />
                        </div>

这是改变时的脚本:

$(function () {
    // Save Customer Identity
    $('#IdentityPicture').on('change', function (e) {
        e.preventDefault();
        var form = $(this).parents('form:first');

        $('#imgIdentityPicture').attr("src", '/Content/Images/Animation/loading_fast.gif');

        form.ajaxSubmit({
            success: function (data) {
                $('#imgIdentityPicture').attr("src", data.Url);
                $('#SettleBeneficiaryIdPicture').val(data.FileName);

            },
            beforeSubmit: function (arr, $form, options) {

            },
            error: function () {
                alert('error');
            }

        });
    });
});

2 个答案:

答案 0 :(得分:1)

       <input type="file" name="photo" id="photoInput" />

 $.validator.addMethod('imagedim', function(value, element, param) {
    var _URL = window.URL;
    var  img;
    if ((element = this.files[0])) {
        img = new Image();
        img.onload = function () {
            console.log("Width:" + this.width + "   Height: " + this.height);//this will give you image width and height and you can easily validate here....

            return this.width >= param
        };
        img.src = _URL.createObjectURL(element);
    }
 });

见这..(How to Preview Image, get file size, image height and width before upload?

答案 1 :(得分:0)

试试这个,

$(function(){
    $('#IdentityPicture').on('change', function (e) {
        e.preventDefault();
        var form = $(this).parents('form:first');

        $('#imgIdentityPicture').attr("src", '/Content/Images/Animation/loading_fast.gif');

        /* code to get width of image */
        var file, img;
        if ((file = this.files[0])) {
           img = new Image();
           img.onload = function () {
               alert(this.width + " " + this.height);
           };
        }
        form.ajaxSubmit({
            success: function (data) {
                $('#imgIdentityPicture').attr("src", data.Url);
                $('#SettleBeneficiaryIdPicture').val(data.FileName);

            },
            beforeSubmit: function (arr, $form, options) {

            },
            error: function () {
                alert('error');
            }
        });
    });
});