FileReader.js在IE9中没有任何反应 [英] FileReader.js nothing happens in IE9
本文介绍了FileReader.js在IE9中没有任何反应的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要帮助设置 Jadriens FileReader.js 。我已经建立了一切，因为我认为这个polyfill工作。但是，一切启动时触发的回调在IE9中不会触发。这是我的标记：
< body>
< div class =main>
< canvas id =mainCanvaswidth =600height =600>< / canvas>< br />
< div id =fileReaderSWFObject>< / div>
< input type =fileid =imageLoadername =imageLoader/>< br />
< input id =texttype =textplaceholder =some text ...>
< / div>
< 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>
这是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;
//函数
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）;
};
//初始
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 ）{
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（）;
}）;
}）;
很多代码，但我认为上下文可能有帮助。重要的一行就在Init注释的下面。 .fileReader init选项中的回调函数不会触发。它会在其他现代浏览器中触发（如果删除了if语句）。
解决方案
这里有一些错误的组合。
- Jahdriens filereader负责Flash的嵌入。只需包含swfObject库即可。
- 浏览器嗅探=坏主意。 Modernizr =好主意。
- 确保你已经安装了IE版本的Flash：（b / b）
$ b我的最终代码如下所示HTML：
< canvas id =mainCanvaswidth =600height =600> ;< / canvas>< / a>
< a id =imageLoaderButtonclass =button upload> load image< / a>
< input type =file >
< input id =texttype =textplaceholder =some text ...> id =imageLoaderclass =hiddenname =imageLoader < script src =// ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js\"></script>
< script> window.jQuery || < / script>'）< / script>
< script src = js / main.js>< / script>
（点击非核心检测 - >文件-API时创建自定义生成）
和我的JS：
$（$）$（$ {$ b $ 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'，$ b $ filereader：'filereader.swf'，
expressInstall：'expressInstall.swf '，
debugMode：true，
callback：function（）{
$（'＃imageLoaderButton'）。
}
}）; （'click'，function（）{
$（'＃imageLoader'）。trigger（'click' ）.on（'change'，read）;
}）;
}
}
}）;
//变量
var canvas = document.getElementById（'mainCanvas'）;
var context = canvas.getContext（'2d'）;
var canvasCenter = canvas.width / 2;
var img ='';
var padding = 50;
$ b $ //函数
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]）;
}
};
$ b $（'＃text'）。keyup（function（e）{
flushCanvas（）;
}）;
}）;
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).
解决方案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); }); } } }); // 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(); }); });这篇关于FileReader.js在IE9中没有任何反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
