在iOS8中使用FileReader最安全的方法是什么？ [英] What's the safest way to use FileReader with iOS8?

问题描述

我有一个具有文件选择器的表单。 < input type =file... 运行下面的代码片段以查看它的作用。

iOS8上的Safari上有一个已知的错误，意味着您无法使用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（文件）; //在iOS8 && Safari中被破坏}  

 < h2>选择一个或多个文件< / h2>< input type =fileid =filesname =files []multiple =multiple/>< h2>加载的文件将显示在下面： h2>< div id =list>< / div>  

看起来，这样的代码片段在iOS上不起作用，所以如果你想运行代码，我把它复制到jsbin这里： http://jsbin.com/zuyeteheroga/3/edit?html,js,output

解决方案

我一直在使用以下方式使用手机的相机拍摄照片并将其显示在网页上：

 < input type =fileid =fileInputaccept =image / *onchange =inputFileChanged（）; /> 
< img alt =图片src =Content / 1.jpgid =imgDisplay/> 
< script type =text / javascript> 
 
函数inputFileChanged（）{
 // alert（Input File Changed）; 
 var files = document.getElementById（fileInput）。files; 
 
 if（window.FileReader）{//检查浏览器 - 是否支持文件读取器？ 
 // alert（reader OK）; 
 loadImageFile（files）; 
} 
 else {
 alert（不支持文件读取器）; 
} 
} 
 
函数loadImageFile（files）{
 if（files&& files.length）{
 var reader = new FileReader ）; 
 reader.onload =（function（theImageElement）{
 return function（e）{
 // alert（reader loaded）; 
 theImageElement.src = e.target。 （$ 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

I have a form that has file selector. <input type="file" ... Run the code snippet below to see what it does.

On Safari on iOS8 there is a known bug that means you cannot read file content with FileReader. This only happens on real hardware, the iOS simulator works fine.

On Chrome on iOS8 this code sometimes just completely crashes the browser.

I don't want to use agent sniffing to decide whether or not to attempt the function. Is there a better way to write this so that I can gracefully degrade to a simpler version?

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>

It appears SO code snippets don't work on iOS so if you want to run the code, I've copied it to jsbin here: http://jsbin.com/zuyeteheroga/3/edit?html,js,output

解决方案

I have been using the following to take a picture using the phone's camera and display it on the web page:

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

On iPhone Safari iOS8, error code 4 (NOT_READABLE_ERR) is returned. This is a known bug (supposed to be resolved on next release).

No problems (so far) with Chrome on iPhone iOS8

这篇关于在iOS8中使用FileReader最安全的方法是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！