2013-05-26 3 views
0

최근 AngularJs를 사용하여 간단한 업 로더 (재사용 가능)를 작성하고 API를 별도의 장소에 유지 한 다음 blueimp jQuery File Uploader을 사용하여 작성한 API를 사용하여 사용자 정의했습니다. 저는 이것을 공유하고 AngularJs에서의 학습을 향상시키기를 바랍니다.AngularJs를 사용한 간단한 업 로더 (CORS 구현 포함)

+0

하고 Upload.html, 거기에 '내가 어떻게 할'사람들이 그것을 쉽게 발견되도록, 여기에 질문 할 수있는 질문을? –

답변

0

http://codelikeapoem.com/2013/05/angularjs-tutorial-4-file-upload-using.html

App.Coffee

@angTut = angular.module("angTut", ['LocalStorageModule', 'ngResource', 'uploaderComponent']); 

@angTut.constant('uploadServiceUrl', 'http://192.168.0.2/api/index.php') 

todos_uploader_controller.coffee

"use strict" 
@angTut.controller('TodosUploadController', (
$scope, uploadService 
) -> 

$scope.uploadLayer = (e, data, process) -> 
    $scope.uploadReturn = uploadService.process(e, data, process) 
    $scope.uploadReturn = uploadService.initialize() 
) 

uploader.directive (당신은 전체 코드 자신을 다운로드 할 수 있습니다) (내가 대답을 추가했습니다)

https://gist.github.com/sk8terboi87/5652187

이 대단한

<div class="control-group"> 
     <input id="testUpload" type="file" fileupload name="files[]" uploadurl="uploadReturn.uploadurl" done="uploadLayer(e, data, 'done')" fail="uploadLayer(e, data, 'fail')" progress="uploadLayer(e, data, 'progress')"> 
     <div class="well" ng-show="uploadReturn.status"> 
     {{uploadReturn.message}} 
     <div ng-show="!uploadReturn.error"> 
      <p class="label label-info">File: {{uploadReturn.successData.name}}</p> 
      <p><a href="{{uploadReturn.successData.fullUrl}}" target="_blank">View file</a></p> 
     </div> 
     </div> 
    </div>