JQuery와 파일 업로드 각 버전 - 같은 페이지

Question

환호에 여러 파일 업로드, 여기

는 AngularJS와 how to use jquery file upload angular version?

하지만 함께 JQuery와 파일 업로드 플러그인을 사용하는 방법 좋은 예입니다! 동일한 페이지에서 위젯이 거의 필요하지 않은 경우 어떻게해야합니까?

1. 콜백 :

   <form class="fileupload" action="server/php/" method="POST" enctype="multipart/form-data"> 
       <!-- ... --> 
   </form> 
   <form class="fileupload" action="server/php/" method="POST" enctype="multipart/form-data"> 
       <!-- ... --> 
   </form> 
   

   이 예는 제외하고, 잘 작동합니다. $ scope()를 사용하는 것은 적절하지 않습니다. 각 위젯에 특정 콜백을 지정하는 방법은 무엇입니까?

2. Drag-n-Drop. 끌어서 놓기 영역이 두 위젯간에 공유되는 것처럼 보이므로 페이지의 어느 위치 에든 파일을 놓으면 두 이벤트가 모두 실행됩니다. 다시 한 번, 각 드롭 영역을 지정하는 방법은 무엇입니까?

내 생각 JQuery와 파일 업로드이 모든 요구 사항을 자신과 모든 약을 커버 할 수 있다는 점이다 가난한 jQuery File Upload AngularJS Plugin

Answer 1

이 문제를 해결하려면하지만 angular-file-upload directive 당신에게 번거 로움을 절약 할 수있는 방법을 확실하지. 가볍고 사용하기 쉽고 FileAPI 플래시 심이있는 HTML5가 아닌 브라우저를 지원합니다. 그것은 또한 드래그 & 드롭 및 업로드 진행을 지원합니다.

<div ng-controller="MyCtrl"> 
    <input type="file" ng-file-select="onFileSelect($files)" multiple> 
    <div class="drop-box" ng-file-drop="onFileSelect($files);" ng-show="ddSupported">drop files here</div> 
    <div ng-file-drop-available="dropSupported=true" ng-show="!ddSupported">HTML5 Drop File is not suported></div> 

JS는 :

//inject angular file upload directive. 
angular.module('myApp', ['angularFileUpload']); 

var MyCtrl = [ '$scope', '$upload', function($scope, $upload) { 
    $scope.onFileSelect = function($files) { 
    //$files: an array of files selected, each file has name, size, and type. 
    for (var i = 0; i < $files.length; i++) { 
     var $file = $files[i]; 
     $upload.upload({ 
     url: 'my/upload/url', 
     file: $file, 
     progress: function(e){} 
     }).then(function(data, status, headers, config) { 
     // file is uploaded successfully 
     console.log(data); 
     }); 
    } 
    } 
}]; 

Answer 2

난에 simmilar 문제가 있었다 어떻게 한 번 더 입력 필드를 사용하기 위해 exaple을 찾을 수 없습니다, 그래서 toyed을 가진 일부 아주 loooong 시간 후 실험 그것으로, 나는 마지막으로 정말 쉬운 해결책을 발견했다 :

• 입력 필드 각각에 대해 별도의 컨트롤러가 필요하다. 과의 (에 대한)이 같은 예를 들어 ...의 드롭 존을 지정해야하는 각 :

  < 형태 NG 컨트롤러 = "MyVideoUploadController"> < 사업부 아이디 = "videoFilesInputZone"> </DIV> </형태>

  < 형태 NG 제어기 = "MyAudioUploadController"> < DIV 자료 = "audioFilesInputZone"> </div> </형태>

  .controller('MyVideoUploadController', [ 
  '$scope', '$http', '$filter', '$window', 
  function ($scope) { 
      $scope.options = { 
       dropZone: $("#videoFilesInputZone") 
      }; 
      $scope.loadingFiles = true; 
  }]).controller('MyAudioUploadController', [ 
  '$scope', '$http', '$filter', '$window', 
  function ($scope) { 
      $scope.options = { 
       dropZone: $("#audioFilesInputZone") 
      }; 
      $scope.loadingFiles = true; 
  } 
  

  ])

및 필요한 모든 사항 단점은 파일을 아무 데나 놓을 수는 없지만 선택된 요소 위에 정확하게 놓아야한다는 것입니다.