FileReader.js nothing happens in IE9

2024/2/27 7:36:46

I need help setting up Jadriens FileReader.js. I have set up everything as I think this polyfill works. But the callback that fires when everything is initiated doesn't 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();
});
});

A lot of code but i thought a context might help. The important lines are just below the Init comment. The callback-function in the .fileReader init options never fires. It does fire in other modern browsers though (if you remove the if statement).

Answer

There are a combination of mistakes here.

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

My final code looks like this and it works perfect. 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 a custom build of modernizr in the head. (click "non core detects" -> "file-api" when creating you custom build)

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);});}}});// Variablesvar canvas = document.getElementById('mainCanvas');var context = canvas.getContext('2d');var canvasCenter = canvas.width / 2;var img = '';var padding = 50;// Functionsvar 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();});
});
http://en.ppmy.cn/q/41781.html

Related Q&A

How to set an interval, but then stop it after 20 minutes

Currently on my webpage I have a timer that runs a function every 30 seconds:setInterval("someFunction(userId)", 30000); This works fine, but the problem is if 100s of users leave their bro…

Parallax scrolling not working on mobile css

My parallax scrolling is not working on mobile devices, both android and iOS. The code works great for desktop but not for mobile, be it any browser. Background images are not scrolling in parallax eff…

Put 2 svg side by side

I am able to use 2 svg on one screen in d3.js. The Code looks like this and it works great:<svg width="880" height="800" id="svg1"></svg> <svg width="…

Insert br / in a String in Javascript

Lets say, I have a pretty long compund String:var result = string1 + " - " + string2 + " - " + string3;and I display the String in the Website by creating a new list item:var listEl…

Allow only numbers and one dot in input

Using the following code with jQuery:$(#from-amount).keypress(function(event) {if ((event.which != 46 || $(this).val().indexOf(.) != -1) && (event.which < 48 || event.which > 57)) {event.…

Javascript. Optimal way to join 2 sets of objects like in SQL?

Lets assume that we have 2 sets of objects set1 = [{id:1, x:1, y:2}, {id:2, x:2, y:2}] set2 = [{id:1, z:1}, {id:2, z:2}]We want: set3 = set1.join(set2).on(id); >> set3 [{id:1, x:1, y:2, z:1},{id…

Why is use strict usually after an IIFE (rather than at the top of a script)?

Ive anecdotally noticed that use strict appears to be more common like this:(function() {use strict;...Than this:use strict; (function() {...The vanilla JS implementation of TodoMVC does this, for exam…

How to identify and Remove any type of Bullet in the Text

I am copyig some data from the MS Word. That text may contain or May not contain Bullets in the copied text. But i need a Regular expression in javascript to remove any type of Bullets from the copied …

React Redux mapDispatchToProps vs this.props.dispatch

Until now I used my containers and components actions this way:<Header btnMnuAction={this.props.toggleSidebar} logout={this.props.logout}/>With the mapDispatchToProps function:const mapDispatchTo…

How to avoid the mailto annoyance?

I am working on a website and would like for my users to be able to give feedback as easily as possible. I know one way but Ive always hated it:<a href="mailto:[email protected]">Click …