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

Question

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

javascriptflashinternet-explorer-9fileapipolyfills

4

我需要帮助设置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语句，则它会在其他现代浏览器中触发。

- Johan B

2个回答

3

IE9存在的问题是需要先安装Flash播放器，此外还有许多功能不受IE9支持。

- Ishmeet Kalsi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Johan B · Accepted Answer

这里有一些错误。

Jahdriens filereader处理嵌入Flash。只需包括swfObject库即可。
浏览器嗅探=不好的想法。使用Modernizr是个好主意。
确保你安装了IE的Flash插件 :(

我的最终代码如下，它完美地工作着。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>

在头部使用自定义版本的modernizr中添加链接（在创建自定义版本时点击“非核心检测” -> “文件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();
    });
});