mko*_*yak 65 file-upload angularjs
对于AngularJS,是否存在具有良好集成(指令)的良好文件上传器？
我正在寻找易于设计的内容并支持HTML5拖放等.
有人可能会说它很容易使用现有的上传器并将其集成到AngularJS中 - 我会说:如果它很容易,那么有人应该已经完成它了.
Ben*_*esh 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中很容易地工作.当你想让Dependency Injection保持活着时,唯一的棘手就是你可以保持你的Angular App可测试.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的技巧,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上的任何东西都会被放到文件上传中,你可以让div看起来像你想要的任何东西.
ADE*_* A. 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类标记(如上面输入[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;
}
}
可以在AngularJS应用程序模块中注册ngUpload指令,即:
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;
}
}
可以在http://ng-upload.eu01.aws.af.cm找到该指令的基于NodeJS的上传处理程序演示.
可以在项目网站上找到ASP.Net MVC和NodeJS示例代码github.com/twilson63/ngUpload/tree/master/examples
希望这可以帮助.
dan*_*ial 12
我已经将polyfill的简单/轻角度指令放在一起,用于不支持HTML5 FormData的浏览器:
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);
});
我最近写了一个支持本机多文件上传的指令.
用法示例:
<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)'/>
| 归档时间： |
|
| 查看次数： |
53171 次 |
| 最近记录： |