使用FileReader API

Question

我试图使用FileReader API读取本地静态文件，但出于某种原因，它没有读取任何内容。我正在使用：

var file = new File(
  [""],
  "config.toml"
);
var reader = new FileReader();
reader.onload = event => {
  console.log(reader.result);
};
reader.readAsText(file);

结果是空的。我做错了什么？另外，Javascript如何知道在哪里查找config.toml？

编辑：来澄清，我想从应用程序所在的服务器读取文件，而不是从客户端机器读取。

Answer 1

在您的代码中，您使用的是File构造函数，它返回一个新构造的文件，其中参数如下：

var myFile = new File(bits, name[, options]);

• bits由ArrayBuffer、ArrayBufferView、Blob或DOMString对象组成的数组--或任何这类对象的混合。这是编码为UTF-8的文件内容。
• name表示文件名或文件路径的USVString

它确实从您提供的路径读取文件。因此，它将读取您传递给它的内容，并将一个空字符串传递给它。

如果要从文件系统读取文件，则需要使用input元素，将type属性设置为file并浏览该元素。

下面是如何使用FileReader api读取图像的示例：

​

function handleFileSelect(evt) {
	var files = evt.target.files;

	// Loop through the FileList and render image files as thumbnails.
	for (var i = 0, f; f = files[i]; i++) {

	// Only process image files.
	if (!f.type.match('image.*')) {
		continue;
	}

	var reader = new FileReader();

	// Closure to capture the file information.
	reader.onload = (function(theFile) {
		return function(e) {
			// Render thumbnail.
			var span = document.createElement('span');
			span.innerHTML = [
				'<img class="thumb" src="', 
				e.target.result,
				'" title="', 
				escape(theFile.name), 
				'"/>'
			].join('');
			document.getElementById('list').insertBefore(span, null);
		};
	})(f);

	// Read in the image file as a data URL.
	reader.readAsDataURL(f);
	}
}

document.getElementById('files').addEventListener('change', handleFileSelect, false);

.thumb {
  height: 75px;
  border: 1px solid #000;
  margin: 10px 5px 0 0;
}

<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

​