如何在浏览器中使用JavaScript读取计算机文件

FileReader对象使Web应用程序可以使用File或Blob对象指定要读取的文件或数据, 从而异步读取用户计算机上存储的文件(或原始数据缓冲区)的内容。一种访问本地文件的简单方法是通过<input type =” file” /> HTML表单元素, 该表单元素将使你可以访问只读。

要检查浏览器是否支持FileReader API, 请使用以下” if”语句：

if (window.File && window.FileReader && window.FileList && window.Blob) {
    // Read files
} else {
    alert('The File APIs are not fully supported by your browser.');
}

借助FileReader API, 可以使用不同的方法以不同的方式读取文件(或Blob)：

• readAsArrayBuffer。
• readAsBinaryString(非标准)。
• readAsDataURL。
• readAsText。

每个方法都希望文件是第一个参数, 以检索文件(如果存在多个属性, 则返回文件), 选择DOM元素并检索files属性的值。

var files = document.getElementById("myFileInput").files;
//
var firstOrUniqueFile = files[0];

if(firstOrUniqueFile){
     // Do something with the file
}

注意：此值是一个数组(FileList), 因此如果文件输入不是多个, 则需要直接访问索引为0的文件。

读取文件

如前所述, FileReader允许你使用不同的方法读取文件。从纯文本到binaryData, 每种方法对待内容返回给你的方式都不同。

在本文中, 你将学习如何正确使用readAsText和readAsDataURL方法。

readAsText

readAsText方法用于读取指定文件(或Blob)的内容。读取操作完成后, 将readyState更改为DONE, 触发loadend, 并且目标的result属性以文本字符串形式包含文件的内容。

此方法期望将文本的编码作为秒钟参数(可选)。

使用以下代码段获取文件的文本内容：

<textarea id="editor"></textarea><br>
<p>
 Select a file from your computer to being read as text.
</p>
<input type="file" id="filetoRead" />

<script>
document.getElementById("filetoRead").addEventListener("change", function(){
        var file = this.files[0];

        if (file) {
            var reader = new FileReader();
            
            reader.onload = function (evt) {
                console.log(evt);
                document.getElementById("editor").value = evt.target.result;
            };

            reader.onerror = function (evt) {
                console.error("An error ocurred reading the file", evt);
            };

            reader.readAsText(file, "UTF-8");
        }
    }, false);
</script>

在以下代码段中测试先前的代码, 当你选择文件时, 它将从你的计算机读取文件的内容, 而无需联系任何服务器：

readAsDataURL

readAsDataURL方法用于读取指定文件(或Blob)的内容。读取操作完成后, readyState变为DONE, 并触发loadEnd。那时, 目标的result属性包含作为URL的数据, 该URL表示作为base64编码字符串的文件数据。

以下代码允许你从设备读取图像并将其转换为base64字符串。然后它将显示在div内的img标签中：

<div id="image-container">

</div>
<p>
 Select an image from your PC to convert it to Base64 and display it in this document
</p>
<input type="file" id="filetoRead" />

<script>document.getElementById("filetoRead").addEventListener("change", function(){
  var file = this.files[0];

  if (file) {
  		if ((file.type == 'image/png') ||
          (file.type == 'image/jpg') ||          
          (file.type == 'image/jpeg')
          ){
      	
         var reader = new FileReader();

      reader.onload = function (evt) {
          var imgTag = '<img style="max-width:300px;" src="'+evt.target.result+'" alt="my image" />';
          document.getElementById("image-container").innerHTML = imgTag;
          alert("Image succefully loaded");
      };

      reader.onerror = function (evt) {
        console.error("An error ocurred reading the file", evt);
      };

      reader.readAsDataURL(file);
        
      }else{
      	alert("Please provide a png or jpg image.");
        return false;
      }
    }
}, false);
</script>

播放以下小提琴, 然后选择一个文件以在浏览器中显示它：

如你所见, 它使用具有文件模仿类型的简单过滤器仅过滤png或jpg图像(你可以根据其扩展名过滤, 而不必手动过滤其模仿类型)。可以使用readAsDataURL, 即在视频标签中播放音频文件。

玩得开心