Question

我需要帮助设置Jadriens FileReader.js。我设置了所有东西，因为我觉得这个polyfill工作。但是，当IE9启动所有内容时触发的回调不会触发。这是我的标记：

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

这是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();
});
});

很多代码但我认为上下文可能有所帮助。重要的行就在Init评论之下。 .fileReader init选项中的回调函数永远不会触发。但它确实在其他现代浏览器中触发（如果删除if语句）。

Answer 1

这里有一些错误。

Jahdriens文件阅读器负责嵌入闪存。只需包含swfObject库。
浏览器嗅探=糟糕的主意。 Modernizr =好主意。
确保安装了适用于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>

+在头部的现代化自定义构建中的链接。（在创建自定义构建时单击“非核心检测” - ＆gt;“file-api”）

我的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();
    });
});

Answer 2

IE9的问题是你需要首先安装flash播放器还有很多IE9不支持的功能

FileReader.js在IE9中没有任何反应

2 个答案: