file upload器集成为angularjs
是否有良好的file upload与AngularJS良好的整合（指令）？
我正在寻找容易风格和支持HTML5拖放等的东西
有人可能会说，它易于使用现有的上传器，并将其集成到AngularJS – 我会说：如果容易，那么已经有人应该已经做到了。
实际上，我曾经推出过自己的上传器，但只是因为我不喜欢任何已经制作好的jQuery。 不幸的是，这是专有的，我不能在互联网上发布…但是，我可以告诉你如何使用Angular的任何JQuery插件：
有人可能会说，它易于使用现有的上传器，并将其集成到AngularJS – 我会说：如果容易，那么已经有人应该已经做到了。
假设我有一个jQuery插件，它通过select一个div并在其上调用pluginUploadCall() …
app.directive('myJqueryPluginUploader', function() { return { restrict: 'A', link: function(scope, elem, attr, ctrl) { // elem is a jQuery lite object // or a jQuery object if jQuery is present. // so call whatever plugins you have. elem.pluginUploadCall(); } }; });
这是如何使用它。
<div my-jquery-plugin-uploader></div>
Angular实际上很好地集成了jQuery，因此任何在jQuery中工作的插件都可以在Angular中轻松使用。 只有当你想保持dependency injection活着，所以你可以保持你的Angular应用程序可testing的唯一技巧。 JQuery在DI方面不是很好，所以你可能需要跳过一些箍环。
如果你想推出自己的，我可以告诉你，我做了这样的事情：
app.directive('customUploader', function(){ return { restrict: 'E', scope: {}, template: '<div class="custom-uploader-container">Drop Files Here<input type="file" class="custom-uploader-input"/><button ng-click="upload()" ng-disabled="notReady">Upload</button></div>', controller: function($scope, $customUploaderService) { $scope.notReady = true; $scope.upload = function() { //scope.files is set in the linking function below. $customUploaderService.beginUpload($scope.files); }; $customUploaderService.onUploadProgress = function(progress) { //do something here. }; $customUploaderService.onComplete = function(result) { // do something here. }; }, link: function(scope, elem, attr, ctrl) { fileInput = elem.find('input[type="file"]'); fileInput.bind('change', function(e) { scope.notReady = e.target.files.length > 0; scope.files = []; for(var i = 0; i < e.target.files.length; i++) { //set files in the scope var file = e.target.files[i]; scope.files.push({ name: file.name, type: file.type, size: file.size }); } }); } });
其中$customUploaderService是您使用$http创build的自定义服务，使用$http来发布文件并检查服务器上的进度。
我知道这是模糊的，我很抱歉，这是我所能提供的，但我希望这有帮助。
编辑：拖放file upload是一个CSS的技巧，BTW …对于Chrome和FF，你所做的是把它放在一个包含div …然后做这样的事情：
<div class="uploadContainer">Drop Files Here<input type="file"/></div>
div.uploadContainer { position: relative; width: 600px; height: 100px; } div.uploadContainer input[type=file] { visibility: hidden; position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
…现在任何你放在该div上的东西都会被放在file upload上，你可以使div看起来像你想要的。
你可以试试AngularJS.ngUpload 。
这是一个不含HTML5的解决scheme，它使用不可见的iFrame进行file upload。 由于它不依赖于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>
任何支持click事件的html元素都可以用来提交一个标有ngUpload指令的表单，只有这些元素必须用upload-submit css类标记（就像上面的input[type = submit]一样）。
下面的例子使用一个样式的div来提交表单。
<form action='/server/upload/handler' ng-upload="callbackFunction"> <!-- other form inputs goes here --> <input type="file" name="anyEasyName" /> <div style="cursor: pointer; padding: 5px" class="upload-submit">Submit</div> </form> <div>{{uploadReport}}</div>
你可以让/ server / upload / handler吐出一个有效的url，这样{{uploadReport}}就可以用来设置<img>标签的src，如下所示：
<img ng-src={{uploadReport}} />
并看到上传的图像立即出现！
上面例子的ngController是：
var UploadCtrl = function ($scope) { $scope.callbackFunction = function(contentOfInvisibleFrame) { $scope.uploadReport = contentOfInvisibleFrame; } }
ngUpload指令可以注册到您的AngularJS应用程序模块，即：
var mainApp = angular.module('MainApp', ["ngUpload", ...]);
并添加到您的文档为：
<html ng-app="MainApp"> </html>
AngularJS.ngUpload在ngController的上下文中工作; 而且你可以在一个ngController中拥有尽可能多的上传者。 例如：
<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; } }
本指令的基于NodeJS的上传处理程序演示可在http://ng-upload.eu01.aws.af.cmfind。;
一个ASP.Net MVC和NodeJS示例代码可以在项目网站上findgithub.com/twilson63/ngUpload/tree/master/examples
希望这可以帮助。
对于不支持HTML5 FormData的浏览器，我已经使用polyfill编写了一个简单/轻量级的angular度指令：
https://github.com/danialfarid/ng-file-upload
您可以将其他模型对象与文件一起发送到服务器。 这里是演示页面：
http://angular-file-upload.appspot.com/
<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); });
如果你想处理多个文件，试试这个
从原作者（blueimp）的jQueryfile uploadAngularjs包装
我认为这是迄今为止最强大的上传器。
我最近写了一个支持本地多个file upload的指令。
用法示例：
<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)'/>
你可以在github上find代码 ，并在我的博客 上find文档
