Как передать значение input type="file" по localStorage

Question

Подскажите как сделать? Смысл - на одной странице index.html к которой прикреплен app.js пользователь выбирает аудиофайл, а на другой result.html и result.js - он запускается в плеере. При использовании localStorage значение File передается, но в переменной path которая берет значение из localStorage лежит уже не File а [object File] . В результате - появляется вот такая ошибка GET file:///D:/education/DREAM_STARTING/2020/trainer/result/[object%20File] net::ERR_FILE_NOT_FOUND Я передаю также имя файла по localStorage nameaudio - тут все нормально. Как сделать, чтобы проигрыватель запускался? Вот код

index.html:

<span>Выберите аудиофайл на своем устройстве:</span>
                <input id="input1" type="file">
<div id ="but_go"  class="go"><span>Go</span></div>

app.js:

$(document).ready(function () {
  $('#but_go').on('click', function () { 
    var nameaudioinindexhtml = document.getElementById('input1').files[0].name;
    var arrinindexhtml =input1.files[0];
    localStorage.setItem('audioname_ls', nameaudioinindexhtml);
    localStorage.setItem('arr_ls', arrinindexhtml);

result.js:

            let path = localStorage.getItem('arr_ls'),
            nameaudio = localStorage.getItem('audioname_ls');
$(document).ready(function(){ 
    let Song,  songs = [0,'Песня_1'];
   function playNewSong(id) {
            let duration; 
            Song = new Audio();
            Song.src = path;
            Song.onloadeddata = function(){
                duration = Song.duration;
                songs.push(duration);
                songs.push(nameaudio);
                Song.play(); ... вот с этого места появляется ошибка
               .....код

Answer 1

Нужно преобразовать файл в Blob-ссылку и ставить в localStorage уже её

$(document).ready(function () {
  $('#but_go').on('click', function () { 
    let audioName = $('#input1').files[0].name,
        audioURL = URL.createObjectURL($('#input1').files[0]);

    localStorage.setItem('audioname_ls', audioName);
    localStorage.setItem('arr_ls', audioURL);
  });
});

БЛОГ НА HUSL

Как передать значение input type="file" по localStorage

Ответы (1 шт):