Как сохранить/загрузить mp3-объект DataURL с помощью java-скрипта?

Позволяет пользователю выбрать файл mp3 из локальной файловой системы, а затем разрешить загрузку того же файла. Его цель обучения.Как сохранить/загрузить mp3-объект DataURL с помощью java-скрипта?

<script type="text/javascript"> 
      window.onload = function() { 
       document.querySelector('#musicFile').addEventListener('change', function(e){ 
          var file = e.target.files[0]; 
          console.log(e, file); 
          if(file.type.match('audio.*')) { // if its an audio file 
           var fReader = new FileReader(); 

           fReader.onload = function(ev) { //onload event 

            var dataUrl = ev.target.result; 


            var downloadCon = document.querySelector('#download') 
            downloadCon.href = dataUrl; 
           }; 

           fReader.readAsDataURL(file); //start reading the file 
          } 
         }); 
      } 
     </script>

HTML-тело:

<body> 
<div class="controls"> 
       <input type="file" id="musicFile"> 
       <a id='download'href='#' download='music.mp3' class='downloadLink'> 
        Download File 
        </a> 
      </div> 
</body>

Когда я нажимаю Download File, ничего не происходит. Можете ли вы сказать мне, что я делаю неправильно?

источник

2015-09-16 Rahul Goyal

Для этого не нужно использовать FileReader. Просто вам нужно создать объект URLObject и сделать тег A для указания на него. Код для этого (протестировано под Chrome и Firefox для Linux):

<script type="text/javascript"> 
    window.onload = function() { 
     document.querySelector('#musicFile').addEventListener('change', function(e){ 
      var file = e.target.files[0]; 
      console.log(e, file); 
      if(file.type.match('audio.*')) { // if its an audio file 
       document.getElementById('download').href = URL.createObjectURL(file); 
      } 
     }); 
    } 
</script>

Чтобы быть более точным на то, что я сделал в своем коде - я удалил весь код FileReader и добавил

document.getElementById('download').href = URL.createObjectURL(file);

в это место. Я не трогал ваш HTML.

Надеюсь, что это поможет.

источник

2015-09-17 10:37:44 metal03326

Как сохранить/загрузить mp3-объект DataURL с помощью java-скрипта?

ответ

Смежные вопросы