Bild-Upload mit Vorschau im IE

Arbeite ich auf Bild hochladen, ich habe um die Vorschau-Bild vor dem hochladen(wie umgesetzt twitter.com für die Anzeige pics)

Habe ich einige schreiben JS-code, das ist in Ordnung, auf chrome und Firefox aber nicht im IE(8 oder 9)

  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="#" />

Habe ich debuggt den code in IE. input.Dateien erscheinen null im IE, kann jemand Ihnen sagt, die Lösung oder eine andere Lösung um die Funktionalität zu implementieren
Hinsichtlich

  • versuchen Sie enctype = "multipart/form-data" zu Ihrem Formular anzeigen. Nur geben diesem einen Versuch...
  • Seine bereits Hinzugefügt in meine form
InformationsquelleAutor Syed Salman Raza Zaidi | 2012-08-25
  1. 5

    Diese funktioniert nicht im IE, weil der code stützt sich auf die HTML5-Datei-API, die IE nicht unterstützt. Es wird anfangen, ihn zu unterstützen, von IE10. Also, wenn Sie brauchen, zu unterstützen, DH weniger als 10 könnten Sie laden die Datei auf dem server mit einigen der bestehenden AJAX-upload-Komponenten (Uploadify, Plupload, Valums AJAX Upload, Bleuimp, ...), generieren und speichern von thumbnail auf dem server und senden Sie die url, um das gespeicherte Bild, um den client über JSON, so dass es anzeigen konnte, es mit einem <img> tag. Eigentlich seit IE unterstützt Data-URI-Schema brauchen Sie nicht zum speichern der hochgeladenen Datei auf dem server die Generierung der Vorschau. Könnte man direkt zurück die resultierende thumbnail-Bild aus Ihrem Album Vorhören controller-action formatiert als Data-URI-Schema, so dass Sie könnte zeigen, dass es auf dem client.

    Andere Lösung, wenn Sie don ' T haben die Zeit und Ressourcen, um diese Funktionalität zu implementieren ist, einfach sagen Sie den Benutzern, dass, wenn Sie wollen zu bekommen eine Echtzeit-Vorschau des Bildes, die Sie sollten erwägen, einen anderen web-browser, weil Ihre Website nicht unterstützt, DH für diese.

    • GUT, endlich jemand der es gesagt hat. Wenn Sie IE verwenden, Sie verdienen keine Vergünstigungen...
    InformationsquelleAutor Darin Dimitrov
  2. 1

    JS:

     <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>

    CSS:

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

    HTML:

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

    InformationsquelleAutor jayan
  4. 0

    aber die Arbeit mit dem IE

    Dokument.getElementById('previmg').src = "file:///" + Eingabe.Wert;

    espero te sirva.

    • andere version von IE - vielleicht?
    InformationsquelleAutor CARLOS HERNANDEZ
Schreibe einen Kommentar