Javascript js在IE9中没有发生任何事情
我需要帮助设置。我已经设置好了一切，因为我认为这个polyfill可以工作。但在IE9中，当一切都启动时触发的回调不会触发。这是我的标记：Javascript js在IE9中没有发生任何事情,javascript,flash,internet-explorer-9,fileapi,polyfills,Javascript,Flash,Internet Explorer 9,Fileapi,Polyfills,我需要帮助设置。我已经设置好了一切，因为我认为这个polyfill可以工作。但在IE9中，当一切都启动时触发的回调不会触发。这是我的标记： <body> <div class="main"> <canvas id="mainCanvas" width="600" height="600"></canvas><br /> <div id="fileReaderSWFObject"></div>
<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>
window.jQuery | | document.write（“”）
$(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();
});
});
$（函数（）{
//变数
var canvas=document.getElementById（'maincavas'）；
var context=canvas.getContext（'2d'）；
var canvasCenter=canvas.width/2；
var img=“”；
var newImageHeight=0；
var logoX=0；
var=50；
//功能
var flushCanvas=函数（）{
context.fillStyle='#000'；
context.fillRect（0,0，canvas.width，canvas.width+padding）；
如果（img！=''）{
context.drawImage（img，padding，padding，canvas.width-（padding*2），newImageHeight-（padding*2））；
}
setText（）；
};
var setText=函数（）{
context.textAlign='center'；
context.fillStyle='#fff'；
context.font='22px无衬线'；
context.textb基线='bottom'；
context.fillText（$（'#text'）.val（），canvasCenter，canvas.height-40）；
};
//初始化
如果（$.browser.msie&&$.browser.version这里有多个错误组合
- Jahdriens filereader负责嵌入flash。只需包含SWFOObject库
- 浏览器嗅探=坏主意。现代化=好主意
- 确保已安装IE闪存：(
我的最后一段代码如下所示，工作非常完美。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>
IE9的问题是您需要先安装flash player，而且IE9不支持许多功能当我按下表单上的“选择文件”按钮时，如何访问我单击的文件的文件内容？
$(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();
});
});