Image resize using jquery

Image resize using jquery

by santosh_patnala

HTML

<p>
    <input type="text" id="imgWidth" value="150" disabled="disabled" />
    <input type="text" id="imgHeight" value="200" disabled="disabled" />
</p>
<p>
    <input type="file" id="file" name="pic" accept="image/*" />
</p>
<p> <span id="imageWrapper" style="border: 1px solid; display: block;">
            <img src="null" style="display: none; width: 100%; height: 100%;" />
        </span>

</p>
<p>
    <textarea id="imagePath"></textarea>
</p>
<p>
    <img src="null" id="imgs" />
</p>
<p>
    <input type="submit" id="btnSubmit" />
</p>
<img id="testImg" src="" />

JavaScript

$(function () {
    var wid = $("#imgWidth").val(),
        hei = $("#imgHeight").val();

    $("#imageWrapper").css({
        width: wid,
        height: hei
    });

    $("#file").change(function () {
        readURL(this);
    });

    $("#btnSubmit").on("click", function () {
        //alert($("#imageWrapper img").attr("src"));
        $("#imagePath").val($("#imageWrapper img").attr("src"));
        $("#testImg").attr("src", $("#imagePath").val());
    });

    //$("imagePath").text($("div#imageWrapper img").attr("src")));
});

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#imageWrapper img').attr('src', e.target.result).css("display", "block");
            $('#imgs').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}