7

サイトのアップロード画像セクションの画像プレビューが IE8+ ブラウザーで機能しません。しかし、IE7 と IE6 では正常に動作します。以下のコードを画像プレビュー機能に使用しています。 JS:

var loadImageFile = (function () {
    if (window.FileReader) {
        var oPreviewImg = null, oFReader = new window.FileReader(),
            rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;

        oFReader.onload = function (oFREvent) {
            if (!oPreviewImg) {
                var newPreview = document.getElementById("imagePreview");
                oPreviewImg = new Image();
                oPreviewImg.style.width = (newPreview.offsetWidth).toString() + "px";
                oPreviewImg.style.height = (newPreview.offsetHeight).toString() + "px";
                newPreview.appendChild(oPreviewImg);
            }
            oPreviewImg.src = oFREvent.target.result;
        };

        return function () {
            var aFiles = document.getElementById("imageInput").files;
            if (aFiles.length === 0) { return; }
            if (!rFilter.test(aFiles[0].type)) { alert("You must select a valid image file!"); return; }
            oFReader.readAsDataURL(aFiles[0]);
        }

    }
    if (navigator.appName === "Microsoft Internet Explorer") {
        return function () {
            document.getElementById("imagePreview").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.getElementById("imageInput").value;

        }
    }
})();

CSS スタイル:

#imagePreview {
    width: 160px;
    height: 120px;
    float: right;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
}
</style>

HTML:

<html>
    <body>
        <div id="imagePreview"></div>

        <form name="uploadForm">
            <p><input id="imageInput" type="file" name="myPhoto" onchange="loadImageFile();"><br>
            <input type="submit" value="Send"></p>
        </form>

    </body>
</html>

このコードは IE 6 と IE7 で動作しますが、IE8+ では動作しません。上記のコードの問題は誰でも知っています。実行例のリンク: https://developer.mozilla.org/files/3699/crossbrowser_image_preview.html

4

3 に答える 3

1

この投稿を確認してください: JavaScript を使用してアップロードする前にプレビュー イメージをアップロードする方法を
テストしました。

IE8 では、セキュリティ設定の変更が必要です: インターネット設定、セキュリティ、カスタム レベル:

 [] ファイルをサーバーにアップロードするときにローカル ディレクトリ パスを含める
 ( ) 無効にする
 (o) 有効にする

このオプションを有効にすると、デモは ie8 で正常に動作します。https://developer.mozilla.org/files/3699/crossbrowser_image_preview.html
ありがとうございます!

于 2015-11-10T10:07:47.543 に答える
0

この投稿のようにします

コードに欠けているのは、高さと幅の設定です

これで試してください

  imagePreview.style.width = "160px";
    imagePreview.style.height = "120px";

画像サイズが言及されているサイズよりも大きい場合、コーディングしても拡大されませんsizingMethod=scale。sizingMethod=image

于 2014-05-07T07:15:47.760 に答える
0

IE8 ではフィルターが -ms-filter に置き換えられました。IE7 と 8 の両方をサポートする場合は、両方のスタイルを提供する必要があります。-ms-filter の構文も filter とは少し異なります。

詳細については、こちらを参照してください: IE8 は「フィルター」CSS スタイルを無視します

于 2012-12-30T23:03:38.770 に答える