File upload angularjs的文件上传器集成_File Upload_Angularjs

File upload angularjs的文件上传器集成

file-upload angularjs

File upload angularjs的文件上传器集成,file-upload,angularjs,File Upload,Angularjs,对于AngularJS，是否存在具有良好集成（指令）的良好文件上传程序我正在寻找的东西是易于风格和支持HTML5拖放等有人可能会说，使用现有的上传程序并将其集成到AngularJS中很容易——对此，我会说：如果很容易，那么应该有人已经这么做了。我实际上曾经使用过我自己的上传程序。。。但这只是因为我不喜欢任何已经制作好的JQuery。不幸的是，这是专有的，我不能发布在互联网上。。。但是我可以向您展示如何使用Angular的任何JQuery插件：有人可能会说，使用现有的上传程序并将其集成到An

对于AngularJS，是否存在具有良好集成（指令）的良好文件上传程序

我正在寻找的东西是易于风格和支持HTML5拖放等

有人可能会说，使用现有的上传程序并将其集成到AngularJS中很容易——对此，我会说：如果很容易，那么应该有人已经这么做了。

我实际上曾经使用过我自己的上传程序。。。但这只是因为我不喜欢任何已经制作好的JQuery。不幸的是，这是专有的，我不能发布在互联网上。。。但是我可以向您展示如何使用Angular的任何JQuery插件：

有人可能会说，使用现有的上传程序并将其集成到AngularJS中很容易——对此，我会说：如果很容易，那么应该有人已经这么做了

假设我有一个jQuery插件，它通过选择一个div并调用

pluginUploadCall（）

来工作

app.directive（'myJqueryPluginUploader'，function（）{
返回{
限制：“A”，
链接：函数（作用域、元素、属性、ctrl）{
//elem是一个jQuery lite对象
//或jQuery对象（如果存在jQuery）。
//所以，调用你所有的插件。
元素pluginUploadCall（）；
}
};
});

下面是它的使用方法

Angular实际上与jQuery集成得非常好，因此任何在jQuery中工作的插件在Angular中都应该非常容易工作。当你想让依赖注入保持活力，从而让你的Angular应用程序保持可测试性时，唯一的窍门就来了。JQuery在DI方面不是很好，因此您可能需要克服一些困难

如果你想自己动手，我可以告诉你我做了这样的事：

app.directive（'customUploader'，function（）{
返回{
限制：'E'，
作用域：{}，
模板：“将文件放到此处上载”，
控制器：函数（$scope，$customUploaderService）{
$scope.notReady=true；
$scope.upload=函数（）{
//scope.files在下面的链接函数中设置。
$customUploaderService.beginUpload（$scope.files）；
};
$customUploaderService.onUploadProgress=函数（进度）{
//在这里做点什么。
};
$customUploaderService.onComplete=函数（结果）{
//在这里做点什么。
};
},
链接：函数（作用域、元素、属性、ctrl）{
fileInput=elem.find（'input[type=“file”]”）；
bind（'change'，函数（e）{
scope.notReady=e.target.files.length>0；
scope.files=[]；
for（var i=0；i


其中，$customUploaderService
是您使用Module.factory（）
创建的自定义服务，它使用$http
发布文件并检查服务器上的进度
我知道这很模糊，很抱歉我只能提供这些，但我希望这能有所帮助
编辑：拖放文件上传是CSS的一个技巧，顺便说一句……对于Chrome和FF，您要做的是将文件放入一个包含div中……然后执行如下操作：
将文件放到这里

div.uploadContainer{
位置：相对位置；
宽度：600px；
高度：100px；
}
div.uploadContainer输入[类型=文件]{
可见性：隐藏；
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
}

…现在，您在该div上放置的任何内容都将在文件上载时真正删除，您可以使该div看起来像您想要的任何内容。
您可以尝试一下
这是一个免费的HTML5解决方案，它使用一个不可见的iFrame来上传文件。因为它不依赖HTML5，所以它可以跨浏览器工作
示例代码：
<form action='/server/upload/handler' ng-upload="callbackFunction">
   <!-- other form inputs goes here -->
   <input type="file" name="anyEasyName" />
   <input type="submit" class="upload-submit" value="Submit" />
</form>
<div>{{uploadReport}}</div>

ngUpload指令可以在AngularJS应用程序模块中注册，即：
var UploadCtrl = function ($scope) {
     $scope.callbackFunction = function(contentOfInvisibleFrame) {
         $scope.uploadReport = contentOfInvisibleFrame;
     }
}

并作为以下内容添加到您的文档中：
var mainApp = angular.module('MainApp', ["ngUpload", ...]);

此指令的基于NodeJS的上载处理程序演示可以在以下位置找到
ASP.Net MVC和NodeJS示例代码可在项目网站github.com/twlison63/ngUpload/tree/master/examples上找到
希望这对您有所帮助。
如果您想处理多个文件，请尝试此方法
来自原作者（blueimp）
我认为它是迄今为止功能最强大的上传程序。
我为不支持HTML5 FormData的浏览器提供了一个简单/轻松的polyfill指令：

可以将其他模型对象与文件一起发送到服务器。
以下是演示页面：

我最近编写了一个支持本地多文件上传的指令
用法示例：
Upload.upload({
    url: 'my/upload/url',
    data: {myObj: $scope.myModelObj},
    file: $scope.files
  }).then(function(data, status, headers, config) {
    // file is uploaded successfully
    console.log(data);
  }); 



您可以在上找到，以及文档。难道您不知道Giuthub页面展示了一些基本流程的优秀示例：@Spir虽然可以工作，但这不是angular在工作中的最佳示例。它将依赖项注入抛出窗口，并且在控制器内部执行大量DOM操作和事件绑定。+29，27号星号，“关闭为非主题”。当我问这个问题时，angular没有一个文件上传器。所以当时它并没有脱离主题，而且它似乎对人们现在仍然非常有用。mkoryak-我很确定@Quibblesome实际上是在挖掘“新”的超严格的，因此没有那么有用的站点策略，而不是你的问题。谢谢你回答了这个问题到目前为止，我所有的angluarjs问题都很多。我一做完就接受他们：）这个信息真的很好，因为我才刚开始，没有太多可用的信息……我不知道我已经这么做了。我真的很喜欢Angular，我觉得文档很缺乏，所以我试着帮你。angula
var mainApp = angular.module('MainApp', ["ngUpload", ...]);

<html ng-app="MainApp">

</html>

<form action='/server/upload/handler' ng-upload="callbackFunction1">
   <!-- other form inputs goes here -->
   <input type="file" name="anyEasyName" />
   <input type="submit" class="upload-submit" value="Submit" />
</form>
Server response: {{uploadReport1}}

<form action='/server/upload/handler' ng-upload="callbackFunction2">
   <!-- other form inputs goes here -->
   <input type="file" name="anotherEasyName" />
   <input type="submit" class="upload-submit" value="Submit" />
</form>
Server response: {{uploadReport2}}

var UploadCtrl = function ($scope) {
     $scope.callbackFunction1 = function(contentOfInvisibleFrame) {
         $scope.uploadReport1 = contentOfInvisibleFrame;
     }

     $scope.callbackFunction2 = function(contentOfInvisibleFrame) {
         $scope.uploadReport2 = contentOfInvisibleFrame;
     }
}

<script src="angular.min.js"></script>
<script src="ng-file-upload.js"></script>

<div ng-controller="MyCtrl">
  <input type="text" ng-model="myModelObj">
  <input type="file" ngf-select ng-model="files" >
</div>

Upload.upload({
    url: 'my/upload/url',
    data: {myObj: $scope.myModelObj},
    file: $scope.files
  }).then(function(data, status, headers, config) {
    // file is uploaded successfully
    console.log(data);
  }); 

<lvl-file-upload
    auto-upload='false'
    choose-file-button-text='Choose files'
    upload-file-button-text='Upload files'
    upload-url='http://localhost:3000/files'
    max-files='10'
    max-file-size-mb='5'
    get-additional-data='getData(files)'
    on-done='done(files, data)'
    on-progress='progress(percentDone)'
    on-error='error(files, type, msg)'/>