load picture dynamically on html and javascript

Question

I want to upload from client computer a picture.

I am doing this as follows. Everything is fine, but this code doesn't work for IE9 (and some prior versions):

The code(Javascript):

function readURL(input, image_id) {
'use strict';
if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function (e) {
        $("#" + image_id).width("auto");
        $("#" + image_id).height("auto");
        s = input.files[0].name;
        $("#" + image_id).attr('src', e.target.result);
    };

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

And code for HTML:

                <div id = "id_divpic">
                    <div class="myfileupload-buttonbar">
                        <label class="myui-button">
                            <span>Your picture</span>
                            <form>
                                <input type="file" name="video" accept="image/jpg,image/gif,image/bmp,image/jpeg,image/xbm" id = "id_filepic" onchange="readURL(this, 'id_image');" />
                            </form>
                        </label>
                    </div>
                    <div id = "id_picture">
                        <div id="id_imgInner">
                            <div id="id_imgBack"></div>
                            <img id="id_image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D" onmousedown="return false" alt="Your picture"/>
                        </div>
                    </div>
                                        </div>

What is wrong in code, that it doens't work on IE8,9?

What can I do in order the code run?

Thanks :)

score 1 · Answer 1 · edited May 23 '17 at 11:57

1

For IE, the FileReader API is only supported in Internet Explorer 10. For IE 8 and 9, an alternative is the ActiveX FileSystemObject.

See IE and local file reading.

edited May 23 '17 at 11:57

Community

1
1

answered Jun 01 '13 at 18:28

calebds

25,670
9
46
74

OK, but I want to have a button, that open file dialog (that's what indeed is done, even on IE9), and get the file name at first. How can I get the file name after openning a file dialog on IE8/IE9? Also as my code - if I refer to input.value, I get the string : c:\fakedpath\myfile.jpg, so I have problem using FileSystemObject. Thanks :) – Eitan Jun 01 '13 at 18:55

score 0 · Accepted Answer · answered Jun 14 '13 at 03:50

On IE8, I use filter AlphaImageLoader (css).

See details on : http://msdn.microsoft.com/en-us/library/ms532969(v=vs.85).aspx

// #id image - tag.

// #id_filepic - tag

   $("#id_image").css("filter", 
    "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=myscale)"); 
// for declaring.

   document.getElementById("id_image").filters.item(
      "DXImageTransform.Microsoft.AlphaImageLoader").src = 
        document.getElementById("id_filepic").value;

Pay attention, that when setting an image, there is delay that you can retrived the image size (especially when width > height), so in order to get right size, you should put something like this.

setTimeout(function () {
            // get size.
        }, 1000);

That's complete my issue.

Thanks, anyway.

load picture dynamically on html and javascript

2 Answers2