динамически загружать изображение на html и javascript

Я хочу загрузить с клиентского компьютера картинку.

Я делаю это следующим образом. Все хорошо, но этот код не работает для IE9 (и некоторых предыдущих версий):

Код (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]);
}

И код для 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>

Что не так в коде, что он не работает в IE8,9?

Что я могу сделать, чтобы код работал?

Спасибо :)


javascript image html filereader
person Eitan    schedule 01.06.2013    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Для IE FileReader API поддерживается только в Internet Explorer 10. Для IE 8 и 9 альтернативой является ActiveX FileSystemObject.

См. раздел IE и чтение локальных файлов.

person calebds    schedule 01.06.2013
comment
Хорошо, но я хочу иметь кнопку, диалоговое окно открытия файла (это то, что действительно делается, даже в IE9) и сначала получить имя файла. Как я могу получить имя файла после открытия диалогового окна файла в IE8/IE9? Также как и мой код - если я ссылаюсь на input.value, я получаю строку: c:\fakedpath\myfile.jpg, поэтому у меня проблема с использованием FileSystemObject. Спасибо :) - person Eitan; 01.06.2013

arrow_upward
0
arrow_downward

В IE8 я использую фильтр AlphaImageLoader (css).

Подробнее см. на: http://msdn.microsoft.com/en-us/library/ms532969%28v=vs.85%29.aspx

// #id изображения - тег.

// #id_filepic - тег

   $("#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;

Обратите внимание, что при установке изображения есть задержка, из-за которой вы можете получить размер изображения (особенно, когда ширина> высота), поэтому, чтобы получить правильный размер, вы должны поставить что-то вроде этого.

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

На этом моя проблема завершена.

Спасибо, в любом случае.

person Eitan    schedule 14.06.2013