2014-05-04 7 views
1

Мне трудно реализовать простой скрипт загрузки файла.
Это то, что я до сих пор работаю нормально:файл скачать с XMLHttpRequest

  • открыть XMLHttpRequest
  • Получить удаленный файл как двоичный объект бинарного
  • Показать прогресс загрузки

Моей проблема:

  • создание пользовательского каталога загрузки
  • переименование загружаемого файла в качестве исходного исходного кода
  • загруженный файл не включает в себя его расширение
  • Возможность добавить опцию для запроса сохранения в качестве местоположения перед загрузкой?

Это фрагмент кода:

$('#DownloadBtn').click(function(e) { 

     e.preventDefault(); 

     var urlFile = $(this).attr('href'); // remote file www.blabla.com/soft123.bin 
     var fileName = ''; // Get remote file name & extension ? 

     var progressBar = document.querySelector('progress'); 

     window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem; 

     function onError(e) { 
      console.log('Error', e); 
     } 

     var xhr = new XMLHttpRequest(); 
     xhr.addEventListener("progress", updateProgress, false); 
     xhr.open('GET', urlFile, true); 
     xhr.responseType = 'blob'; 
     var resourceDIRLOC = "Downloads"; 
     xhr.onload = function(e) { 
      window.requestFileSystem(TEMPORARY, 10 * 1024 * 1024, function(fs) { 
       fs.root.getDirectory(fs.root.fullPath + '/' + resourceDIRLOC, { 
        create: true 
       }, function(dir) { 
        resourceDIR = dir; 
        fs.root.getFile(fileName, { 
         create: true 
        }, function(fileEntry) { 
         fileEntry.createWriter(function(writer) { 
          writer.onwrite = function(e) {}; 
          writer.onerror = function(e) {}; 
          var blob = new Blob([xhr.response], { 
           type: ' application/octet-stream' 
          }); 

          writer.write(blob); 
         }, onError); 
        }, onError); 
       }, onError); 
      }, onError); 
     }; 

     function updateProgress(e) { 
      if (e.lengthComputable) { 
       $(progressBar).show(); 
       var i = (e.loaded/e.total) * 100; 
       progressBar.value = i; 
       if (i == 100) { 
        $(progressBar).hide(); 
       } 
      } 
     } 
     xhr.send(); 
    }); 

Загруженный файл находится под FileSystem->000->t с 00 как имя (не soft123.bin)

Я не уверен, если это возможно, чтобы дать пользователь может выбрать каталог загрузки вне FileSystem? Как определено выше, целевой каталог resourceDIRLOC = "Downloads", но запрос не создает эту папку? ни дать файлу имя и расширение
Любой посоветуете ценится
Благодарности

+0

вы можете попробовать [это] (http://johnculviner.com/jquery-file-download-plugin-for-ajax-like-feature-rich-file-downloads/) – xiidea

+0

Как вы пишете файл cookie в http-заголовке, как описано в документации с Javascript? Должен ли он быть добавлен в заголовок документа HTML? – Awena

+1

Предполагается, что загружаемый файл будет обслуживаться через скрипт на стороне сервера (например, php/asp и т. Д.). – xiidea

ответ

2

Вот как вы можете следить за ходом загрузки и выберите каталог загрузки с использованием Node-Webki. Сначала я пытался загрузить с помощью XMLHttpRequest, чтобы отслеживать ход загрузки, но у меня были трудности с API FileSystem. Это сделало работу так, как я хотел, простую загрузку файла с индикатором выполнения. Надеюсь, это полезно.

function download(file_url) { 
    var fs = require('fs'); 
    var url = require('url'); 
    var http = require('http'); 
    var options = { 
     host: url.parse(file_url).host, 
     port: 80, 
     path: url.parse(file_url).pathname 
    }; 
    var file_name = url.parse(file_url).pathname.split('/').pop(); 
    var file = fs.createWriteStream('./' + file_name); 
    http.get(options, function(res) { 
     var fsize = res.headers['content-length']; 
     res.on('data', function(data) { 
      file.write(data); 
      progress(100 - (((fsize - file.bytesWritten)/fsize) * 100), $('#progressBar')); 
     }).on('end', function() { 
      file.end(); 
     }); 
    }); 
} 

function progress(percent, $element) { 
    console.log("Download: " + parseInt(percent) + " %") 
    var progressBarWidth = percent * $element.width()/100; 
    $element.find('div').css("width", progressBarWidth); 
} 

Ответ нашел here

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