HTML5 FileReader如何返回結果？

我使用JS FileReader，並且我需要在文件讀取操作後使用此數據進行操作。 FileReader是異步讀取的，我不知道，當結果準備使用。這個怎麼做？HTML5 FileReader如何返回結果？

$(document).ready(function(){ 
    $('#file_input').on('change', function(e){ 
     var res = readFile(this.files[0]); 

     //my some manipulate with res 

     $('#output_field').text(res); 
    }); 
}); 

function readFile(file){ 
    var reader = new FileReader(), 
     result = 'empty'; 

    reader.onload = function(e) 
    { 
     result = e.target.result; 
    }; 

    reader.readAsText(file); 

    //waiting until result is empty? 

    return result; 
}

http://jsfiddle.net/ub22m/4/

它顯示「空」。

如何要等到「結果」是空的？另一種方式？

來源

2012-08-06 trafalgarx

閱讀發生異步。您需要提供自定義onload回調定義讀取完成時會發生什麼：

$(document).ready(function(){ 
    $('#file_input').on('change', function(e){ 
     readFile(this.files[0], function(e) { 
      // use result in callback... 
      $('#output_field').text(e.target.result); 
     }); 
    }); 
}); 

function readFile(file, onLoadCallback){ 
    var reader = new FileReader(); 
    reader.onload = onLoadCallback; 
    reader.readAsText(file); 
}

（見Fiddle。）

注意readFile不返回值。相反，它接受一個回調函數，只要讀取完成就會觸發。 $('#output_field').text操作被移入回調函數。這可以確保只有當e.target.result將被填充時，該操作纔會運行，直到讀取器的onload回調觸發爲止。

編程與回調是有點難以得到的權利在第一，但它是實現先進的功能，絕對必要的。

來源

2012-08-06 14:18:46 apsillers

這兩個'e's之間有區別嗎？ – 2015-05-21 21:53:04

@ChrisChudzicki是的，他們是不同的。第一個'e'是[jQuery事件對象]（https://api.jquery.com/category/events/event-object/）。第二個'e'是[加載事件對象]（https://developer.mozilla.org/en-US/docs/Web/Events/load）。 – trafalgarx 2016-10-19 08:06:52

這裏的JavaScript：

$(document).ready(function() { 
    $('#file_input').on('change', function(e) { 

     function updateProgress(evt) { 
      if (evt.lengthComputable) { 
       // evt.loaded and evt.total are ProgressEvent properties 
       var loaded = (evt.loaded/evt.total); 
       if (loaded < 1) { 
        // Increase the prog bar length 
        style.width = (loaded * 200) + "px"; 
       } 
      } 
     } 

     function loaded(evt) { 
      // Obtain the read file data  
      var fileString = evt.target.result; 
      // Handle UTF-16 file dump 
      $('#output_field').text(fileString); 
     } 
     var res = readFile(this.files[0]); 

     var reader = new FileReader(); 

     reader.readAsText(this.files[0], "UTF-8"); 

     reader.onprogress = updateProgress; 
     reader.onload = loaded; 


    }); 
}); 

function readFile(file) { 
    var reader = new FileReader(), 
     result = 'empty'; 

    reader.onload = function(e) { 
     result = e.target.result; 
    }; 

    reader.readAsText(file); 

    return result; 
}

當然而且，HTML部分：

<input type="file" id="file_input" class="foo" /> 
<div id="progBar" style="background-color:black;width:1px;"> </div> 
<div id="output_field" class="foo"></div>

似乎對* .txt文件的工作。

See this fiddle。

來源

2012-08-06 14:12:58

奇怪的，小提琴恢復到舊版本。現在修復。 – 2012-08-06 14:45:04

return是我相信在這裏提到的關鍵字。 readFile函數將始終返回'空' – Urasquirrel 2016-05-16 23:53:12

使用情況的FileReader

<html> 
    <head> 
     <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css"> 
     <script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
     <script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script> 
    </head> 
    <body> 
     <script> 
      function PreviewImage() { 
      var oFReader = new FileReader(); 
      oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]); 
      oFReader.onload = function (oFREvent) { 
       var sizef = document.getElementById('uploadImage').files[0].size; 
       document.getElementById("uploadPreview").src = oFREvent.target.result; 
       document.getElementById("uploadImageValue").value = oFREvent.target.result; 
      }; 
     }; 
     jQuery(document).ready(function(){ 
      $('#viewSource').click(function() 
      { 
       var imgUrl = $('#uploadImageValue').val(); 
       alert(imgUrl); 
      }); 
     }); 
     </script> 
     <div> 
      <input type="hidden" id="uploadImageValue" name="uploadImageValue" value="" /> 
      <img id="uploadPreview" style="width: 150px; height: 150px;" /><br /> 
      <input id="uploadImage" style="width:120px" type="file" size="10" accept="image/jpeg,image/gif, image/png" name="myPhoto" onchange="PreviewImage();" /> 
     </div> 
     <a href="#" id="viewSource">Source file</a> 
    </body> 
</html>

來源

2015-02-19 10:30:03 websky

HTML5 FileReader如何返回結果？

回答

相關問題