在iOS8上使用FileReader最安全的方法是什麼？

我有一個具有文件選擇器的窗體。 <input type="file" ...運行下面的代碼片段以查看它的功能。在iOS8上使用FileReader最安全的方法是什麼？

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

看起來是這樣的代碼片段並不在iOS上工作，所以，如果你想運行的代碼，我已經複製它jsbin這裏：http://jsbin.com/zuyeteheroga/3/edit?html,js,output

來源

2014-09-22 matt burns

難道你不能簡單地測試'result.length'嗎？ – Bergi 2014-09-22 16:03:17

我認爲文件閱讀器工作正常...但多個上傳不能正常工作，並給你0byte文件...我解決了刪除'multiple =「multiple」'的問題..自然你只能上傳一個文件...這在iOS 7上。 – cocco 2014-09-22 16:06:42

@Bergi，從不調用onload函數... – 2014-09-22 16:15:06

我一直使用以下方式使用手機的相機拍照並將其顯示在網頁上：

<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 i OS8，返回錯誤代碼4（NOT_READABLE_ERR）。這是一個已知的錯誤（應該在下一個版本中解決）。

iPhone iOS8上的Chrome沒有問題（目前爲止）

來源

2014-09-25 14:06:44 Jupiter

在iOS8上使用FileReader最安全的方法是什麼？

回答

相關問題