Question

我想从客户端计算机上传一张图片。

我这样做如下。一切都很好，但这段代码不适用于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上不起作用？

为了让代码运行，我该怎么做？

谢谢：）

Answer 1

对于IE，FileReader API仅在Internet Explorer 10中受支持。对于IE 8和9，另一种选择是ActiveX FileSystemObject。

请参阅IE and local file reading。

Answer 2

在IE8上，我使用过滤器AlphaImageLoader（css）。

详情请见：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;

注意，在设置图像时，有延迟可以恢复图像尺寸（特别是当宽度>高度时），所以为了获得正确的尺寸，你应该放这样的东西。

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

这完全是我的问题。

谢谢，无论如何。

在html和javascript上动态加载图片

2 个答案: