Как работать с URL-адресом объекта fileReader?

Question

Здравствуйте! Я пытаюсь заставить его работать с функцией loadDocument, для работы которой нужен URL-адрес загруженных файлов с локального компьютера пользователя. Я пишу API для загрузки документа с локального компьютера пользователя и отображения его в веб-ридере.

Это моя кнопка загрузки: <input type="file" id="input" onchange="module.onLoadSelection();" alt="Browse" name="upload"/>

Это моя функция без fileReader:

var onLoadSelection = function () {
    var select = document.getElementById('input');
    if (select && select.value) {
        var id= '';
        var url = select.files.item(0).name;
        module.loadDocument(url,id);
    }
};

Это моя функция с fileReader:

var loadTest = function (input) {
    var file = document.querySelector('input[type=file]').files[0];
    console.log("file loaded! ->", file); // i can read the obj of my file
    var reader = new FileReader();

    var id = ''; // don't need rightnow
    var url = reader.readAsDataURL(file);
    console.log("url :", url); // show me undefined....
    module.loadDocument(url,id);
}

Я пытаюсь получить URL загруженного файла с компьютера пользователя, чтобы моя функция loadDocument работала. Ей нужен параметр url для работы.

loadDocument - это функция API, я предполагаю, что не могу получить путь к файлу моего пользователя по соображениям безопасности.

Что мне нужно изменить / обновить на моей loadDocument(); функции для работы?

Редактировать: На самом деле, ничего не изменится. Правильный способ прочитать мой файл был: <input type="file" id="input" onchange="module.onLoadSelection(this.files);" alt="Browse" name="upload"/>

var onLoadSelection = function (files) {
    if (files && files.length == 1) {
       var id = '';
       var url = URL.createObjectURL(files[0]);
       module.loadDocument(url,id);
    }
};

Answer 1

Файловые объекты имеют метод readAsDataURL .

Используйте это.

  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();

  reader.addEventListener("load", function () {
    doSomethingWithAUrl(reader.result);
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }

Answer 2

Не используйте FileReader вообще.

Если вы хотите отобразить файл (или большой двоичный объект), который находится в памяти браузера или на диске пользователя, все, что вам нужно, это сгенерировать URL-адрес, указывающий на этот слот памяти.
Это именно то, что URL.createObjectURL(blob) делает: он возвращает BLRI URI (blob://), который указывает на данные либо в памяти, либо на диске, действуя точно как простой указатель.

Этот метод имеет различные преимущества перед методом FileReader.readAsDataURL(). Чтобы назвать несколько:

• Сохранять данные в памяти только один раз, когда FileReader понадобится при чтении, затем генерировать копию в кодировке base64, а другую при отображении ...
• Синхронный. Поскольку все, что он делает, это генерирует указатель, нет необходимости делать его асинхронным.
• Код уборщика.

const module = {
  loadDocument: (url) => {
    document.body.append(
      Object.assign(
        document.createElement('iframe'),
        { src: url }
      )
    )
  }
};

document.querySelector('input[type=file]').addEventListener('input', function (evt) {
    var file = this.files[0];
    var url = URL.createObjectURL(file);
    module.loadDocument(url);
});

<input type="file">

Answer 3

 function PreviewFiles(input) {
        if (input.files && input.files[0]) {
             var reader = new FileReader();
             reader.onload = function (e) {
             //alert(e.target.result);
                 $('#pclogo').prop('src', e.target.result)
                    .width(200)
                    .height(200);
                    var base64result = e.target.result.split(',')[1];
                $('input[name="logo"]').val(base64result);
            };
            reader.readAsDataURL(input.files[0]);

            }

        }