Polyfill for FileReader API

Polyfill for FileReader API

本文关键字：API FileReader for Polyfill      更新时间：2023-09-26

请帮助我在IE9中使用fileReader polyfill。我无法说出如何使用它。

如果我在这里做错了什么，请纠正我。我正在尝试将FileReader API Shim用于IE9。但在输入类型＝file的更改事件中，我仍然得到事件错误消息中未定义的files属性张贴以下代码供您参考`

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

最后，我通过以下方式为IE9 polyfill FileReader API找到了解决方案https://github.com/Aymkdn/FileToDataURI

    <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>
相关文章：