Использование FileReader API - PullRequest
Новая
       7

Использование FileReader API

0 голосов
/ 23 июня 2018

Я пытаюсь прочитать локальный статический файл с помощью API FileReader, но по какой-то причине он ничего не читает.Я использую: 

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

Результат просто пуст.Что я делаю неправильно?Кроме того, как Javascript узнает, где искать config.toml?

РЕДАКТИРОВАТЬ: Чтобы уточнить, я хочу прочитать файл с сервера, на котором размещено приложение, а не с клиентского компьютера.

1 Ответ

0 голосов
/ 23 июня 2018

В вашем коде вы используете конструктор File, который возвращает вновь созданный файл, аргументы которого следующие: 

var myFile = new File(bits, name[, options]);
  • bits Массив объектов ArrayBuffer, ArrayBufferView, Blob или DOMString - или смесь любых таких объектов. Это содержимое файла в кодировке UTF-8
  • name USVString, представляющая имя файла или путь к файлу

Он читает файл по указанному вами пути. Поэтому он будет читать содержимое, которое вы ему передали, и вы передали ему пустую строку.

Если вы хотите прочитать файл из файловой системы, вам нужно будет использовать элемент input с атрибутом type, установленным в file, и найти его.

Вот пример использования API FileReader для чтения изображений: 

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>
...