Adapt JS Code to IE8 and IE9

Asked

Viewed 719 times

6

How can I make this code below work on IE8 and IE9, because it only works on 10

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

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

});

Method that does not work

URL.createObjectURL

Anything already helps(libraries, scripts and etc)

javascript internet-explorer internet-explorer-8

  • Hello, which method or object does not work on IE8 and 9 ?

  • @Paulohdsousa Editei!

  • @You’ve already tested this: http://stackoverflow.com/a/11277737/2256325 ?

  • @Sergio, had not seen.. but still unfortunately does not solve 100% of the problem because in IE 9 still does not work

  • I guess the ones before the 10 there is no way anyway.

  • What is this method for?

  • Because @bfavaretto said that’s not going to work. What do you want to do? preview images? Something like this: http://stackoverflow.com/q/4459379/2256325 ?

  • face I don’t even know what to use for it to work. IE is a life lag. It serves absolutely nothing. In fact it serves only to give problems

  • I respect your opinion, but there really are situations where the customer requires the system to work (sometimes even exclusively) in the IE, including multinational companies.

  • @Silvioandorinha you just want to make a "preview" of the image?

  • I didn’t actually work with IE 10, so I don’t know that method. I imagine you will have to do a function to verify which version of the customer’s IE and if it is version before the IE 10, work differently. Depending on your objective, there is a way that applies to previous and current versions.

  • Just as a complement I am on a project for a large company that to homologue it needs to run on IE8. So, unfortunately, personal taste does not serve as a parameter or guide.

  • I found this in the English Stack Overflow. http://stackoverflow.com/questions/14206127/createobjecturl-does-not-work-in-ie10 Look if it can help you.

  • This issue is resolved?

  • @Miguelangelo.

  • Is it possible to install something on the computer? Like a server... or Flash in the browser?

Show 11 more comments

3 answers

1

Moxie library

I found a library capable of doing what you’re asking. It is a polyfill listed on modernizr’s Github called Moxie. The library is fantastic, except to start development. I had to compile it, and then I started testing... I fixed some compilation errors, and some errors in the generated Javascript, then finally it worked.

I used the following parts of the Moxie:

  • Fileinput: component that allows you to select a file and use the files that are selected using a FileReader
  • Filereader: allows you to read a file
  • Image: allows you to manipulate images, such as resize them

Due to the difficulty I had in compiling, I decided to create a repository on Github with the already compiled version:

Example of use

I put it in the folder \v1.2.1\samples, the example of how to do what you said:

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

Compatibility

Works in the IE8ok and IE9ok. Also in the Chromeok, Firefoxok and Operaok.

I had trouble with the Safarifail, IE6fail and IE7fail.

Perhaps it’s best to use a selective approach between my response, your own code (should work in Safari), and Reply by @Carlosmartins (which uses Alphaimageloader, so I searched it works on IE6 and IE7). You could use conditional comments to achieve full compatibility if you want.

Dependencies

To work on IE8 and IE9, Moxie requires or Flash or Silverlight. It seems that they have plans to support the use of Java as well, but for now they don’t have.

0

The last time I did I ended up hiding when I was the ie8

in your case would do more or less like this:

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

The solution to your problem I think is here. I tested on IE7+ and it works.

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

Browser other questions tagged javascript internet-explorer internet-explorer-8

You are not signed in. Login or sign up in order to post.