javascript - 在 iOS8 中使用 FileReader 最安全的方法是什么？

Question

我有一个带有文件选择器的表单。 <input type="file" ...运行下面的代码片段，看看它做了什么。

在 iOS8 的 Safari 上有 a known bug that means you cannot read file content with FileReader .这只发生在真实硬件上，iOS 模拟器工作正常。

在 iOS8 上的 Chrome 上，此代码有时会使浏览器完全崩溃。

我不想使用代理嗅探来决定是否尝试该功能。有没有更好的方法来编写这个，以便我可以优雅地降级到更简单的版本？

document.getElementById('files').addEventListener('change', handleFileSelect, false);

function handleFileSelect(evt) {
    var fileList = evt.target.files;
  
    for (var i = 0; i < fileList.length; i++) {
        loadFile(fileList[i]);
    }
}

function loadFile(file) {
    var reader = new FileReader();
    reader.onload = function (evt) {
        document.getElementById('list').innerHTML += "file loaded: " + evt.target.result;
    };

    reader.readAsDataURL(file); // broken in iOS8 && Safari
}

<h2>Choose 1 or more files</h2>

<input type="file" id="files" name="files[]" multiple="multiple" />

<h2>Loaded files will appear below:</h2>
<div id="list"></div>

看来 SO 代码片段在 iOS 上不起作用，所以如果您想运行代码，我已将其复制到此处的 jsbin:http://jsbin.com/zuyeteheroga/3/edit?html,js,output

Answer 1

我一直在使用下面的方法，用手机的摄像头拍照并显示在网页上:

<input type="file" id="fileInput" accept="image/*" onchange="inputFileChanged();" />
<img alt="The Picture" src="Content/1.jpg" id="imgDisplay" />
<script type="text/javascript">

    function inputFileChanged() {
        //alert("Input File Changed");
        var files = document.getElementById("fileInput").files;

        if (window.FileReader) { //Check browser - does it support File Reader?
            //alert("reader OK");
            loadImageFile(files);
        }
        else {
            alert("File Reader not Supported");
        }
    }

    function loadImageFile(files) {
        if (files && files.length) {
            var reader = new FileReader();
            reader.onload = (function (theImageElement) {
                return function (e) {
                    //alert("reader loaded");
                    theImageElement.src = e.target.result;
                }
            })(document.getElementById("imgDisplay"));
            reader.onerror = function (e) {
                alert("error " + e.target.error.code);
            }
            reader.readAsDataURL(files[0]);
        } else {
            alert("no file");
        }
    }
</script>

在 iPhone Safari iOS8 上，返回错误代码 4 (NOT_READABLE_ERR)。这是一个已知错误(应该在下一个版本中解决)。

iPhone iOS8 上的 Chrome 没有问题(到目前为止)