请帮助我使用 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>最佳答案
最后，我能够通过 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>
关于javascript - FileReader API 的 Polyfill，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28399621/