angularjs용 파일업로더 통합
Angular JS에 적합한 통합(지시)을 갖춘 우수한 파일 업로더가 있습니까?
스타일링하기 쉽고 HTML5 드래그 앤 드롭 등을 지원하는 것을 찾고 있습니다.
기존 업로더를 사용하여 Angular에 통합하는 것이 쉽다고 말하는 사람도 있을 것입니다.JS - 그 점에 대해서 말하겠다: 만약 쉽다면 누군가는 이미 그것을 했어야 했다.
사실 한번은 제 업로더를 굴린 적이 있어이미 만든 JQuery가 마음에 안 들어서요.불행히도 그건 소유권이라서 인터넷에 올릴 수 없지만...Angular에서 JQuery 플러그인을 사용하는 방법을 보여 줄 수 있습니다.
기존 업로더를 사용하여 Angular에 통합하는 것이 쉽다고 말하는 사람도 있을 것입니다.JS-그것에 대해 나는 말한다: 만약 그것이 쉬웠다면 누군가는 이미 그것을 했어야 했다.
div를 선택하고 호출하여 동작하는 jQuery 플러그인이 있다고 가정합니다.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 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파일을 투고해, 서버의 진척 상황을 확인합니다.
애매한 건 알지만 그게 제가 드릴 수 있는 전부라서 죄송하지만 도움이 됐으면 좋겠어요.
EDIT: 드래그 앤 드롭 파일 업로드는 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를 원하는 대로 만들 수 있습니다.
AngularJS.ngUpload를 사용해 볼 수 있습니다.
파일 업로드에 투명 iFrame을 사용하는 HTML5 프리 솔루션입니다.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>
클릭 이벤트를 지원하는 모든 html 요소를 사용하여 ngUpload 지시문이 표시된 양식을 제출할 수 있습니다. 단, 이러한 요소에는 위의 입력과 같이 업로드/다운로드 css 클래스가 표시되어야 합니다.
다음 예제에서는 스타일 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의 src를 다음과 같이 설정하기 위해 {uploadReport}을(를) 사용할 수 있습니다.
<img ng-src={{uploadReport}} />
업로드한 이미지가 바로 뜨는 것을 확인하세요!
위의 예시의 ngController는 다음과 같습니다.
var UploadCtrl = function ($scope) {
$scope.callbackFunction = function(contentOfInvisibleFrame) {
$scope.uploadReport = contentOfInvisibleFrame;
}
}
ngUpload 지시문은 Angular에 등록할 수 있습니다.JS 응용 프로그램 모듈 viz:
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 에서 구할 수 있습니다.
ASP.Net MVC 및 NodeJS 샘플 코드는 프로젝트 웹사이트(github.com/twilson63/ngUpload/tree/master/examples에서 확인할 수 있습니다.
이게 도움이 됐으면 좋겠다.
HTML5 FormData를 지원하지 않는 브라우저용 polyfill과 함께 간단한/가벼운 각도 지시문을 작성했습니다.
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);
});
여러 파일을 처리하려면 다음을 수행하십시오.
원본 작성자의 jQuery 파일 업로드 Angularjs 랩(blueimp)
지금까지 업로더 중 가장 파워풀한 업로더라고 생각합니다.
최근에 네이티브 다중 파일 업로드를 지원하는 지침을 작성했습니다.
사용 예:
<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에서 찾을 수 있고 문서는 제 블로그에서 찾을 수 있습니다.
언급URL : https://stackoverflow.com/questions/12979712/file-uploader-integration-for-angularjs
'programing' 카테고리의 다른 글
| WP 루프 외부에서 게시물 작성자 ID를 가져옵니다. (0) | 2023.03.07 |
|---|---|
| wp-cli: MAMP에서 phpunit을 실행할 수 없습니다. (0) | 2023.03.07 |
| 모델에 숫자를 사용하는 Angularjs ng-옵션에서 초기 값을 선택하지 않음 (0) | 2023.03.07 |
| WordPress rest API OAuth curl 명령 (0) | 2023.03.07 |
| .NET 4에는 JSON 시리얼라이저/디시리얼라이저가 내장되어 있습니까? (0) | 2023.03.07 |