3

私は画像のアップロードに取り組んでいます。アップロードする前に画像をプレビューする必要があります（写真を表示するためにtwitter.comに実装されているように）

ChromeとFirefoxでは正常に動作しているがIE（8または9）では動作しないJSコードをいくつか作成しました

  function PreviewImg(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#previmg').attr('src', e.target.result);
            }

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


<input type="file" name="logofile" class="txtbox" onchange="PreviewImg(this);" />
  <img id="previmg" src="#" />

IEでコードをデバッグしました。input.filesはIEでnullとして表示されますが、機能を実装するようにソリューションまたは他のソリューションに指示することはできますか？

4

3 に答える 3

5

コードはIEがサポートしていないHTML5ファイルAPIに依存しているため、これはIEでは機能しません。IE10からのサポートを開始します。したがって、10未満のIEをサポートする必要がある場合は、既存のAJAXアップロードコンポーネント（Uploadify、Plupload、Valums AJAX Upload、Bleuimpなど）を使用してファイルをサーバーにアップロードし、サムネイルを生成してサーバーに保存できます。保存した画像のURLをJSONを使用してクライアントに送信し、<img>タグを使用して表示できるようにします。実際、IEはデータURIスキームをサポートしているため、プレビューを生成するためにアップロードされたファイルをサーバーに保存する必要はありません。クライアントに表示できるように、データURIスキームとしてフォーマットされたプレビューコントローラーアクションから結果のサムネイル画像を直接返すことができます。

この機能を実装する時間とリソースがない場合の別の解決策は、画像のリアルタイムプレビューを取得したい場合は、サイトがサポートしていないため、別のWebブラウザの使用を検討する必要があることをユーザーに伝えることです。このためのIE。

于 2012-08-25T08:47:05.980 に答える
1 

 <script type="text/javascript">
            function loadname(img, previewName) {
                var isIE = false;
                if (jQuery.browser.msie) {
                    isIE = true;
                }
                var path = img.value;
                var ext = path.substring(path.lastIndexOf('.') + 1).toLowerCase();
                if (ext = "gif" || "jpeg" || "jpg" || "png") {
                    if (isIE) {
                      document.getElementById(previewName.id.toString()).src = path;
                        return;
                    } else {
                        if (img.files[0]) {
                            var reader = new FileReader();
                            reader.onload = function (e) {
                                $('#' + previewName).attr('src', e.target.result);
                            }
                            reader.readAsDataURL(img.files[0]);
                        }
                    }
                } else {
                    alert("You must select a valid image file!");
                }
            }



            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;

                    }
                }
            })();

    </script>
 <style>
        #imagePreview
        {
            width: 260px;
            height: 240px;
            float: right;
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
        }
    </style>
<div id="imagePreview"></div>
    <p><input id="imageInput" type="file" name="myPhoto" onchange="loadImageFile();"><br><input type="submit" value="Send" /></p>

于 2015-06-18T08:57:15.000 に答える
0

しかし、IEで動作します

document.getElementById('previmg').src = "file:///" + input.value;
于 2013-02-04T14:40:28.100 に答える