cannot change width+height of image by javascript

I dynamically upload my picture. My code should run also for IE9, and on the following code, I focus on IE9 only:

    <!doctype html>
    <html>
    <head>
    <!-- <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> -->
    <link href='http://fonts.googleapis.com/css?family=PT+Sans:400italic' rel='stylesheet' type='text/css'>  
    <link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=PT+Sans:700' rel='stylesheet' type='text/css'>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
    <title>Image preview example</title>
    <script type="text/javascript">
    var loadImageFile = (function () {
        if (navigator.appName === "Microsoft Internet Explorer") {
            return function () {
                $("#id_image").width(300);
                $("#id_image").height(300);
                $("#id_image").css("filter", "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image)");
                document.getElementById("id_image").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.getElementById("imageInput").value;
$("#id_image").width(320); // ****** Problematic line
$('#id_image").height(350); // ****** Problematic line
            }
        }
    })();
    </script>
    <style type="text/css">
    </style>
    </head>

    <body>

    <form name="uploadForm">
    <p><input id="imageInput" type="file" name="myPhoto" onchange="loadImageFile();" /><br />
    </form>
    <img id="id_image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D" onmousedown="return false" alt="Your picture"/>
    </body>
    </html>
  1. Why must I declare width+height before line: document.getElementById("id_image").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.getElementById("imageInput").value ?

  2. I cannot put line (marked on asterisk : ** Problematic line), because it doesn't change the width+height.

How can I change the width+height instead?

Thanks :)

Answers


There is a delay when changing image size till it changes on screen.

You can consider this issue as closed.


Need Your Help

Parsing complex XML using XmlPullParser

android xml xmlpullparser

I'm facing the problem of parsing xml using XmlPullParser. Everithing works fine except this problmatic part:

detecting loops in symbolic links (c programming)

c errno

I'm looking to detect loops in symbolic links in a C program: