使用JavaScript FileReader API時是否有文件大小限制？

您可以使用JavaScript FileReader API來顯示從文件輸入字段提供的圖像預覽。這意味着您不必使用服務器端php和ajax來顯示圖像，這非常有用。使用JavaScript FileReader API時是否有文件大小限制？

我的問題，雖然是這樣的：

是否有正在使用的任何限制的圖像文件的大小？就像用戶選擇20MB的圖像一樣，filereader能夠處理它嗎？機器的內存可能會最大化嗎？

我現在正在我的機器上進行本地測試。我試圖加載一個bmp文件（53MB！），這個文件花了大約15秒來處理並顯示在頁面上。 1/2MB的其他文件一般顯示即時。

它可能不是必需的，但這裏是我的HTML文件：（FYI：此代碼的工作以及在支持的瀏覽器）

<!DOCTYPE html> 
<html> 

    <head> 
     <meta charset="utf-8"/> 
     <title>Dropzone File Upload</title> 

    </head> 

    <body> 

     <img id="uploadPreview" src="default.png" style="width: 100px; height: 100px;" /> 
     <input id="uploadImage" type="file" name="myPhoto" onchange="PreviewImage();" /> 
     <p id="uploadProgress">&nbsp;</p> 

     <script type="text/javascript"> 
      function PreviewImage() { 
       var avatar_image = document.getElementById("uploadImage"); 
       var avatar_preview = document.getElementById("uploadPreview"); 
       var avatar_progress = document.getElementById("uploadProgress"); 

       if (window.FileReader) { //if supports filereader 

        var imgReader = new FileReader(); 
        imgReader.readAsDataURL(avatar_image.files[0]); //read from file input 

        imgReader.onloadstart = function(e) { 
         avatar_progress.innerHTML = "Starting to Load"; 
        } 
        imgReader.onload = function (imgReaderEvent) { 
         //if file is image 
         if (
          avatar_image.files[0].type == 'image/jpg' || 
          avatar_image.files[0].type == 'image/jpeg' || 
          avatar_image.files[0].type == 'image/png' || 
          avatar_image.files[0].type == 'image/gif' || 
          avatar_image.files[0].type == 'image/bmp' 
          ) { 
          avatar_preview.src = imgReaderEvent.target.result; 
         } 
         else { 
          avatar_preview.src = 'filetype.png'; 
         } 
        } 
        imgReader.onloadend = function(e) { 
         avatar_progress.innerHTML = "Loaded!"; 
        } 
       } 

       /* For no support, use ActiveX instead */ 
       else { 
        document.getElementById("uploadPreview").src = "nosupport.png"; 
       }  

      }; 
     </script> 

    </body> 
</html>

來源

2013-12-20 Patrick Keane

[This answer]（http://stackoverflow.com/questions/9265139/html5-filereader-api-crashes-chrome-17-when-reading-large-file-as-slice）侷限性。 – kamituel

像這樣的任何容量問題總是有相同的答案：它會工作，直到它不，它取決於客戶端的能力。便宜的智能手機不會像擁有大量RAM的臺式電腦那樣容量大。 – Pointy

-1

這似乎沒有對文件大小沒有限制。我和你過去做過一樣的事情，並注意到顯示之前的時間是由於存儲在內存/瀏覽器中。所以延遲將取決於用戶的計算機。如果你必須處理大量的大圖像（> 10MB），你可以在加載過程中放置一個gif加載器。

來源

2013-12-20 15:13:22 ClemSndr

gif loader是一個好主意，我必須補充說明。通常情況下，我希望文件大小在較低範圍內，但是我希望能夠支持較大文件大小的情況，而不是文件大小限制。 #uploadPreview處理這麼大的文件會有什麼問題，或者是不相關的？ –

它根本不會是#uploadPreview的問題。但請記住，如果圖像具有高分辨率（eg.2000x2000），並且#uploadPreview是一個小框（例如100x100），則圖像將被縮小，並且您會注意到圖像上出現了一些混疊。 – ClemSndr

這是不正確的，正確的答案是有一個硬限制。 – rjurney

看來在Chrome 45中的限制是261 MB。

不幸的是，當尺寸高於該限制時，沒有錯誤（FileReader.error == null），結果只是一個空字符串。內存是你的主要內容（請參閱下面的內容）：

來源

2015-09-24 04:14:48 AndreKR

我剛剛注意到了一些相當大的數據集：一個257MB文件讀取，但459MB文件返回一個空字符串，Chrome 49. – o1sound

@AndreKR谷歌的任何官方文檔的限制？ –

@PaulAlexander我找不到任何。我注意到這個數字是在最大的Javascript字符串長度的範圍內，即2^28或2^29或類似的東西。 – AndreKR

使用JavaScript FileReader API時是否有文件大小限制？

回答

相關問題