沒有本地服務器的角度文件上傳？

我正在嘗試爲Angular應用程序創建文件上傳。我希望用戶能夠瀏覽他們的本地文件系統以便上傳文件，就像您可以在任何數量的常見網站上執行的操作一樣。沒有本地服務器的角度文件上傳？

我一直在使用angular-file-upload的客戶端交互，但由於它需要特定的路由接入籌備的文件上傳，我不知道如何使它與我的應用程序的安裝工作。在開發過程中，應用程序通過Grunt和代理服務器運行到運行JAX-RS Web服務數據的服務器上。在生產中，應用程序作爲WAR部署在與Web服務JAX-RS WAR相同的JBoss實例中。考慮到這種情況，我覺得我有兩種選擇，兩種都不行：

1）站在具有暫存路由的Grunt的快速服務器上。這是行不通的，因爲我不希望在生產環境中運行快速服務器，而且我不確定甚至可能因爲應用程序和Web服務部署在JBoss中？

2）分段路由將像所有其他路由一樣進行代理。顯然這不適用於從用戶的本地硬盤上傳！

我一直在想，必須有另一個更好的選擇，將工作。我研究了其他站點如何允許我想要的功能，並且發現this thread解釋了客戶端如何啓動與服務器的TCP/IP連接。但是，我不確定這是否是正確的路線。

任何人都可以提供一些見解？這是我的經驗領域之外，我真的很感激一些指導！

預先感謝您

來源

2014-09-03 bmyers

您的問題更多的是與步兵比它angularJS，使用像快遞一個適當的框架，你就會有您需要了解其中所有的文檔上傳的文件被複制（可能在系統臨時文件夾默認情況下）。 – mpm 2014-09-04 00:06:47

謝謝 - 我認爲是這樣。但是，由於應用程序在生產和部署中的服務方式，站在Express服務器上確實不是一個好選擇。我對Facebook等網站能夠允許用戶從本地機器上傳文件感興趣，因爲他們顯然沒有爲此目的而在本地運行的服務器。 – bmyers 2014-09-04 15:48:07

檢查了這一點，你可以使用HTML5的FileReader與$解析應用到文件輸入一個指令內。通過這種方式，您只需將文件上傳到您的客戶端Angular應用程序即可。也許這個例子會有所幫助。

指令：

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

此時文件數據位於您的客戶端Angular代碼中，因此您可以將它發送到Java應用程序中的某個終端進行永久存儲。

這裏是我學會了這從博客：http://veamospues.wordpress.com/2014/01/27/reading-files-with-angularjs/

來源

2014-09-05 23:52:22 aarosil

非常感謝！我知道必須有辦法做到這一點。 – bmyers 2014-09-17 23:20:50

非常歡迎，很高興它幫助 – aarosil 2014-09-18 00:05:41

我使用你的指令，我喜歡它，但我發現了一個小問題：當我第一次選擇任何文件的時候，但是當我再次選擇相同的文件時（我需要它在我的應用程序中）沒有任何東西被觸發，因爲我們正在觀看'change'事件。所以我最後在'reader.readAsText ...'之後添加了'ele.val（''）'，這解決了我的問題。不管怎樣，謝謝你。 – 2016-04-07 07:55:52

沒有本地服務器的角度文件上傳？

回答

相關問題