FileReader 的 Polyfill API

Question

请帮助我使用适用于 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>

Answer 1

最终我能够通过 https://github.com/Aymkdn/FileToDataURI

提出针对 IE 9 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>

FileReader 的 Polyfill API

Polyfill for FileReader API

javascript

flash

filereader

internet-explorer-9