6

Como posso fazer esse código abaixo funcionar no IE8 e IE9, porque ele funciona apenas no 10

$("#input_file").change( function(event) {
    var tmppath = URL.createObjectURL(event.target.files[0]);

    $("img").attr('src',tmppath);

});

Método que não funciona

URL.createObjectURL

Qualquer coisa já ajuda(bibliotecas, scripts e etc)

16
  • Olá, qual método ou objeto que não funciona no IE8 e 9 ? Commented 13/01/2015 às 17:38
  • @PauloHDSousa Editei! Commented 13/01/2015 às 17:39
  • @SilvioAndorinha já testaste isto: stackoverflow.com/a/11277737/2256325 ?
    – Sergio
    Commented 13/01/2015 às 17:40
  • @Sergio, não tinha visto.. mas mesmo assim infelizmente ainda não resolve 100% do problema porque no IE 9 ainda não funciona Commented 13/01/2015 às 17:47
  • Acho que nos IEs anteriores ao 10 não tem jeito mesmo.
    – bfavaretto
    Commented 13/01/2015 às 17:53

3 Respostas 3

1

Biblioteca mOxie

Achei uma biblioteca capaz de fazer o que você está pedindo. Trata-se de um polyfill listado no GitHub do modernizr chamado mOxie. A biblioteca é fantástica, exceto para se iniciar o desenvolvimento. Tive de compilar ela, para depois começar a testar... ai corrigi uns erros de compilação, e uns erros no JavaScript gerado, ai finalmente funcionou.

Usei as seguintes partes do mOxie:

  • FileInput: componente que permite selecionar um arquivo e utilizar os arquivo que forem selecionados usando um FileReader
  • FileReader: permite ler um arquivo
  • Image: permite manipular imagens, tal como redimensioná-la

Pela dificuldade que tive na compilação, resolvi criar um repositório no GitHub com a versão já compilada:

Exemplo de uso

Coloquei na pasta \v1.2.1\samples, o exemplo de como fazer o que você falou:

  • image-preview-before-upload.htm

    <!DOCTYPE html>
    <html>
    <head>
        <script type="text/javascript" src="moxie.min.js"></script>
        <script>mOxie.Env.swf_url = 'Moxie.swf';</script>
        <script type="text/javascript">
            function readURL(input) {
                if (input.files && input.files[0]) {
                    var reader = new mOxie.FileReader();
                    reader.onload = function (e) {
                        var img = new mOxie.Image();
                        img.onload = function() {
                            img.downsize({width:100});
                            var tgt = document.getElementById("target");
                            img.embed(tgt);
                        };
                        img.load(e.target.result);
                    };
                    reader.readAsDataURL(input.files[0]);
                }
            }
        </script>
    </head>
    <body>
        <form id="form1">
            <div id="container">
                <a id="file-picker" href="javascript:;">Browse...</a>
            </div>
    
            <script>
                var fileInput = new mOxie.FileInput({
                    browse_button: 'file-picker', // or document.getElementById('file-picker')
                    container: 'container',
                    accept: [
                        {title: "Image files", extensions: "jpg,gif,png"} // accept only images
                    ],
                    multiple: true // allow multiple file selection
                });
    
                fileInput.onchange = function(e) {
                    // do something to files array
                    //console.info(e.target.files); // or this.files or fileInput.files
                    readURL(this);
                };
    
                fileInput.init(); // initialize
            </script>
            <div id="target"></div>
        </form>
    </body></html>
    

Compatibilidade

Funciona no IE8ok e IE9ok. Também no Chromeok, FireFoxok e Operaok.

Tive problema com o Safarifail, IE6fail e IE7fail.

Talvez o melhor seja usar uma abordagem seletiva entre a minha resposta, o seu próprio código (deve funcionar no Safari), e a resposta do @CarlosMartins (que usa AlphaImageLoader, pelo que pesquisei funciona no IE6 e IE7). Você poderia usar comentários condicionais para atingir a compatibilidade total se quiser.

Dependências

Para funcionar no IE8 e IE9 o mOxie requer ou Flash ou SilverLight. Parece que eles possuem planos de suportar o uso de Java também, mas por enquanto não tem.

0

A última vez que fiz eu acabei ocultando quando fosse o ie8

no seu caso faria mais ou menos assim:

function createObjectURL ( file ) {
    if ( window.webkitURL ) {
        return window.webkitURL.createObjectURL( file );
    } else if ( window.URL && window.URL.createObjectURL ) {
        return window.URL.createObjectURL( file );
    } else {
        return null;
    }
}

$("#input_file").change( function(event) {
    var tmppath = createObjectURL(event.target.files[0]);
	if(tmppath)
		$("img").attr('src',tmppath);
	else
		$("img").hide()
});

0

A solução para o teu problema penso que está aqui. Testei no IE7+ e funciona.

<style>
    #preview_ie {
        FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)
    }
</style>

<body>
    <div id="preview_ie">
    </div>
    <form id="form1" runat="server">
        <input type='file' id="imgInp" onchange="readURL(this)" />
    </form>
    <script type="text/javascript">
        function readURL(imgFile)
        {    
            var newPreview = document.getElementById("preview_ie");
            newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value;
            newPreview.style.width = "160px";
            newPreview.style.height = "120px";
        }  
    </Script>
</body>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .