Угловая загрузка файла без локального сервера?

Question

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

Я использовал angular-file-upload для взаимодействия на стороне клиента, но поскольку для доступа к поставленным файлам для загрузки требуется определенный маршрут, я не уверен, как заставить его работать с настройкой моего приложения. В процессе разработки приложение подается с Grunt и прокси-серверами на сервер, на котором запущена веб-служба JAX-RS для данных. В производстве приложение развертывается как WAR в том же экземпляре JBoss, что и веб-сервис JAX-RS WAR. Размышляя над этой ситуацией, я чувствую, что у меня есть два варианта: ни один из них не будет работать:

1) Стенд экспресс-сервера с Grunt, у которого есть маршрут маршрутизации. Это не сработает, потому что я бы предпочел не иметь экспресс-сервер, работающий на производстве, и я не уверен, что это возможно даже после того, как приложение и веб-служба развернуты в JBoss?

2) Промежуточный маршрут будет прокси-сервером, как и все другие маршруты. Очевидно, что это не будет работать для загрузки с локального жесткого диска пользователя!

Я продолжаю думать, что должен быть другой, лучший вариант, который будет работать. Я рассмотрел, как другие сайты позволяют использовать функциональные возможности, и нашел this thread, объясняя, как клиент инициирует соединение TCP/IP с сервером. Однако я не уверен, что это правильный путь.

Может ли кто-нибудь дать представление? Это выходит за рамки моего опыта, и я очень благодарен за руководство!

Спасибо заранее

Answer 1

проверить это, вы можете использовать HTML5 FileReader с $ синтаксический внутри директивы вы подаете заявление на вход файла. Таким образом, вы просто загружаете файл в свое приложение на стороне клиента. Может быть, этот пример поможет.

Директива:

angular.module('core').directive('onReadFile', ['$parse', 
    function($parse){ 
     return { 
      restrict: 'A', 
      scope: false, 
      link: function(scope, ele, attrs) { 

       var fn = $parse(attrs.onReadFile); 
       ele.on('change', function(onChangeEvent){ 
        var reader = new FileReader(); 

        reader.onload = function(onLoadEvent) { 
         scope.$apply(function(){ 
          fn(scope, {$fileContents: onLoadEvent.target.result}) 
         }) 
        } 

        reader.readAsText((onChangeEvent.srcElement || onChangeEvent.target).files[0]); 
       }) 

      } 
     } 
    } 
]); 

Используйте его в представлении:

<div> 
    <label>Select File</label> 
    <input type="file" on-read-file="parseInputFile($fileContents)"> 
</div> 

доступ к файлу данных в контроллере:

$scope.parseInputFile = function(fileText){ 
    // do whatever you want w/ fileText... 
} 

Вы также можете использовать FileReader для бинарных файлов (изображения): https://developer.mozilla.org/en-US/docs/Web/API/FileReader

На данный момент данные файла находятся в пределах вашего кода на стороне клиента, поэтому вы можете отправить его в какую-либо конечную точку вашего Java-приложения для постоянного хранения.

Вот блог Я узнал об этом от: http://veamospues.wordpress.com/2014/01/27/reading-files-with-angularjs/