AngularJS 是否存在具有良好集成（指令）的良好文件上传器？
我正在寻找易于设置样式并支持 HTML5 拖放等的东西。
有人可能会说它很容易使用现有的上传器并将其集成到 AngularJS 中——我会说：如果它很容易，那么应该有人已经做到了。
问问题
54331 次
5 回答
47
实际上，我曾经推出过自己的上传器......但只是因为我不喜欢任何已经制作的 JQuery 。不幸的是，这是专有的，我不能在互联网上发布它......但是......我可以向你展示如何使用来自 Angular 的任何 JQuery 插件：
有人可能会说它很容易使用现有的上传器并将其集成到 AngularJS 中——我会说：如果它很容易，那么应该有人已经做到了。
假设我有一个 jQuery 插件，它通过选择一个 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 中很容易地工作。当你想让依赖注入保持活跃时，唯一的技巧就出现了，这样你就可以让你的 Angular 应用程序保持可测试性。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服务将在哪里发布文件并检查服务器上的进度。Module.factory()$http
我知道这很模糊，很抱歉，我只能提供这些，但我希望这会有所帮助。
编辑：拖放文件上传有点 CSS 的技巧，顺便说一句......对于 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 上放置的任何内容都将真正被放置在文件上传中，并且您可以使 div 看起来像您想要的任何东西。
于 2012-10-21T23:52:34.643 回答
25
你可以试试AngularJS.ngUpload 。
这是一个无 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>
任何支持 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.cm找到。
可以在项目网站 github.com/twilson63/ngUpload/tree/master/examples 上找到 ASP.Net MVC 和 NodeJS 示例代码
希望这可以帮助。
于 2013-03-08T09:38:29.063 回答
12
I have put together a simple/light angular directive with polyfill for browsers not supporting HTML5 FormData here:
https://github.com/danialfarid/ng-file-upload
You can send other model object along with the file to the server. Here is the demo page:
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>
controller:
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);
});
于 2013-07-24T15:46:23.710 回答
7
于 2013-07-13T22:51:20.583 回答
5
我最近写了一个支持原生多文件上传的指令。
示例用法：
<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 上找到代码，在我的博客上找到文档
于 2013-09-12T13:30:49.803 回答