如何在浏览器中使用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 = http://www.srcmini.com/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, 即在视频标签中播放音频文件。
【如何在浏览器中使用JavaScript读取计算机文件】玩得开心