用于 FileReader API 的 Polyfill答案

【问题标题】：Polyfill for FileReader API用于 FileReader API 的 Polyfill
【发布时间】：2015-02-08 21:33:55
【问题描述】：

请帮助我使用 IE9 的 fileReader polyfill。我无法弄清楚如何使用它。

如果我在这里做错了什么，请纠正我。我正在尝试为 IE9 使用 FileReader API Shim。但是在输入类型 = 文件的更改事件中，我仍然得到文件属性未在事件错误消息中定义贴出下面的代码供大家参考`

<body>
<div class="main">
    <div id="fileReaderSWFObject"></div>
    <input type="file" id="imageLoader" name="imageLoader" /><br />
    <input id="text" type="text" placeholder="some text...">
</div>

<script src="jquery-1.8.0.min.js"></script>
<script src="jquery-ui-1.10.1.custom.min.js"></script>
<script src="jquery.FileReader.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>

<script>
$(function () {
// Variables


// Init
if ($.browser.msie && $.browser.version <= 9) {
    
    $('#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);
    } 
});
});
</script>
</body>

【问题讨论】：

标签： javascript flash internet-explorer-9 filereader

【解决方案1】：

最后我通过https://github.com/Aymkdn/FileToDataURI 想出了IE9 polyfill FileReader API 的解决方案

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
    <object id="file-object">
    </object>
    <div id="file-result"></div>
    <script type="text/javascript">
    var Flash = {
      /* Flash.getFileData() is called after the file has been read */
      getFileData: function(base64) {
        showResult(base64)
      },
      /* getButtonLabel() permits to define another label for the "Load a file" button in the Flash version */
      getButtonLabel: function() {
        return "Load a file";
      }
    };

    // we just want to show the result into the div
    function showResult(b) {
      $('#file-result').text(b)
    }

    // check if the FileReader API exists... if not then load the Flash object
    if (typeof FileReader !== "function")
      // we use 80px by 23px, because we want the object to have the same size than the button
      swfobject.embedSWF("FileToDataURI.swf", "file-object", "80px", "23px", "10", "expressInstall.swf", {}, {}, {});
    else {
      // replace the <object> by an input file
      $('#file-object').replaceWith('<input type="file" id="file-object" value="Load a file" />');
      $('#file-object').on('change', function(e) {
        var files = e.target.files,file;

        if (!files || files.length == 0) return;
        file = files[0];

        var fileReader = new FileReader();
        fileReader.onload = function (e) {
          // ATTENTION: to have the same result than the Flash object we need to split
          // our result to keep only the Base64 part
          showResult(e.target.result.split(",")[1]);
        };
        fileReader.readAsDataURL(file);
      });
    }
    </script>

【讨论】：