没有本地服务器的角度文件上传？

我正在尝试为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

没有本地服务器的角度文件上传？

回答

相关问题