Question

我有一个包含文件选择器的表单。 <input type="file" ...运行下面的代码段，了解其功能。

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

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

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

＆＃13;

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
}

＆＃13;

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

＆＃13;

看起来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没有任何问题（目前为止）

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

1 个答案: