Geek Answers Handbook

FileReader.js nothing happens in IE9

I need help setting up Jadriens FileReader.js . I created everything, as I think it works polyfill. But the callback that fires when everything is triggered does not fire in IE9. This is my markup:

<body> <div class="main"> <canvas id="mainCanvas" width="600" height="600"></canvas><br /> <div id="fileReaderSWFObject"></div> <input type="file" id="imageLoader" name="imageLoader" /><br /> <input id="text" type="text" placeholder="some text..."> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.1.min.js"><\/script>')</script> <!--[if lt IE 10]> <script src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script> <script src="js/vendor/jquery-ui-1.8.23.custom.min.js"></script> <script src="js/vendor/jquery.FileReader.min.js"></script> <![endif]--> <script src="js/plugins.js"></script> <script src="js/main.js"></script> </body>

And this is main.js:

 $(function () { // Variables var canvas = document.getElementById('mainCanvas'); var context = canvas.getContext('2d'); var canvasCenter = canvas.width / 2; var img = ''; var newImageHeight = 0; var logoX = 0; var padding = 50; // Functions var flushCanvas = function () { context.fillStyle = '#000'; context.fillRect(0, 0, canvas.width, canvas.width + padding); if (img !== '') { context.drawImage(img, padding, padding, canvas.width - (padding * 2), newImageHeight - (padding * 2)); } setText(); }; var setText = function () { context.textAlign = 'center'; context.fillStyle = '#fff'; context.font = '22px sans-serif'; context.textBaseline = 'bottom'; context.fillText($('#text').val(), canvasCenter, canvas.height - 40); }; // Init if ($.browser.msie && $.browser.version <= 9) { swfobject.embedSWF('filereader.swf', 'fileReaderSWFObject', '100%', '100%', '10', 'expressinstall.swf'); $('#imageLoader').fileReader({ id: 'fileReaderSWFObject', filereader: 'filereader.swf', expressInstall: 'expressInstall.swf', debugMode: true, callback: function () { console.log('filereader ready'); } }); } $('#imageLoader').change(function (e) { if ($.browser.msie && $.browser.version <= 9) { console.log(e.target.files[0].name); } else { var reader = new FileReader(); reader.onload = function (event) { img = new Image(); img.onload = function () { newImageHeight = (img.height / img.width) * (canvas.width); canvas.height = newImageHeight + padding; flushCanvas(); } img.src = event.target.result; } reader.readAsDataURL(e.target.files[0]); } }); $('#text').keyup(function (e) { flushCanvas(); }); });

Lots of code, but I thought context could help. Important lines are just below the Init comment. The callback function in the initialization parameters .fileReader never fires. However, it works in other modern browsers (if you delete the if statement).

+4
source share
2 answers

There is a combination of errors.

  • Jahdriens filereader takes care of the implementation of the flash. Just turn on the swfObject library.
  • Browser sniffing = bad idea. Modernizr = good idea.
  • Make sure you have flash installed for IE :(

My latest code looks like this and it works great. HTML:

 <canvas id="mainCanvas" width="600" height="600"></canvas><br /> <a id="imageLoaderButton" class="button upload">load image</a> <input type="file" id="imageLoader" class="hidden" name="imageLoader" /> <input id="text" type="text" placeholder="some text..."> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.1.min.js"><\/script>')</script> <script src="js/main.js"></script>

+ link in the custom assembly modernizr in the head. (when creating a custom assembly, click "non-kernel detects" → "api file")

And my JS:

 $(function () { Modernizr.load({ test: Modernizr.filereader, nope: ['js/vendor/swfobject.js', 'js/vendor/jquery-ui-1.8.23.custom.min.js', 'js/vendor/jquery.FileReader.min.js'], complete: function () { if (!Modernizr.filereader) { $('#imageLoaderButton').fileReader({ id: 'fileReaderSWFObject', filereader: 'filereader.swf', expressInstall: 'expressInstall.swf', debugMode: true, callback: function () { $('#imageLoaderButton').show().on('change', read); } }); } else { $('#imageLoaderButton').show().on('click', function () { $('#imageLoader').trigger('click').on('change', read); }); } } }); // Variables var canvas = document.getElementById('mainCanvas'); var context = canvas.getContext('2d'); var canvasCenter = canvas.width / 2; var img = ''; var padding = 50; // Functions var flushCanvas = function () { context.fillStyle = '#000'; context.fillRect(0, 0, canvas.width, canvas.width + padding); if (img !== '') { context.drawImage(img, padding, padding, canvas.width - (padding * 2), newImageHeight - (padding * 2)); } setText(); }; var setText = function () { context.textAlign = 'center'; context.fillStyle = '#fff'; context.font = '22px sans-serif'; context.textBaseline = 'bottom'; context.fillText($('#text').val(), canvasCenter, canvas.height - 40); }; var read = function (e) { if (typeof FileReader !== 'undefined') { var reader = new FileReader(); reader.onload = function (event) { img = new Image(); img.onload = function () { newImageHeight = (img.height / img.width) * (canvas.width); canvas.height = newImageHeight + padding; flushCanvas(); } img.src = event.target.result; } reader.readAsDataURL(e.target.files[0]); } }; $('#text').keyup(function (e) { flushCanvas(); }); });
+5
source

The problem with IE9 is that you need a flash player that must be installed first, there are also many features that are not supported by IE9

+2
source

More articles:


All Articles