JavaScript - 从文件读取URL并将其保存为数组中的元素

问题描述

我有很少的javascript技巧，我想将一个文件的行作为String参数传递给一个预先写好的函数。基本上我想要做的是读取这种格式的文件，每个网址都在自己的行上：

www.url1.com
www.url2.com


...等等

如何读取本地文件并将每行保存到一个字符串数组？

非常感谢，如果有什么不清楚的地方，请告诉我。

您可以通过查看，和网络API。请注意，您的浏览器可能不支持这些API，但大多数现代浏览器应该。您可以通过在窗口对象中查找它们的属性来检查它们的存在。

我在下面添加了示例代码

HTML：

 < input id = ftype =file> 
  

JavaScript：

  //当你用输入按钮打开一个文件时，触发这个事件监听器。 
 document.getElementById（'f'）。addEventListener（'change'，function（event）{
 //从FileList获取文件
 //文档：https：//developer.mozilla .org / en-US / docs / Web / API / FileList 
 var f = this.files [0]; // event.target.files [0] works too 
 
 //需要这个异步文件I / O的API实例
 var fr = new FileReader（）; 
 
 //首先创建一个函数来处理onload事件
 fr.onload = function（event）{
 // FileReader.result保存文件内容
 //文档：https：//developer.mozilla.org/en-US/docs/Web/API/ FileReader / result 
 var textInFile = this.result; // event.target.result也可以使用
 // String.prototype.split和换行符参数
 var url = textInFile.split（' \ n）; 
 console.log（urls）; 
} 
 
 //执行异步I / O并最终触发onload事件
 //默认编码是UTF-8。
 // Documen https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsText 
 fr.readAsText（f）; 
}）; 
  

I have very little javascript skills and I would like to pass lines of a file as String arguments to a pre-written function. Basically what I want to do is read a file in this type of format, with each url on its own line:

www.url1.com www.url2.com

...And so on

How can I read a local file and save each line to a String array?

Thank you very much, and let me know if anything is unclear

解决方案

You can do this by looking at FileList, File, and FileReader web APIs. Note that your browser may not support these APIs, but most modern browsers should. You can check for their existence by looking for their properties in the window object.

I have added example code below with comments.

HTML:

<input id="f" type="file">

JavaScript:

// This event listener is triggered when you open a file with the input button.
document.getElementById('f').addEventListener('change', function(event) {
  // Get File from FileList.
  // Documentation: https://developer.mozilla.org/en-US/docs/Web/API/FileList
  var f = this.files[0]; // event.target.files[0] works too

  // Need an instance of this API for asynchronous file I/O.
  var fr = new FileReader();

  // First create a function to handle the "onload" event.
  fr.onload = function(event) {
    // FileReader.result holds file contents
    // Documentation: https://developer.mozilla.org/en-US/docs/Web/API/FileReader/result
    var textInFile = this.result; // event.target.result works too
    // String.prototype.split with newline character argument
    var urls = textInFile.split('\n');
    console.log(urls);
  }

  // This performs asynchronous I/O and eventually triggers the "onload" event.
  // Default encoding is UTF-8.
  // Documentation: https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsText
  fr.readAsText(f);
});

这篇关于JavaScript - 从文件读取URL并将其保存为数组中的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！