Drag and Drop AngularJs с FileList

Question

Я очень новичок в интерфейсной разработке, и я подумал, что было бы здорово добавить перетаскивание на текущую страницу загрузки. Однако после того, как я начал подключать все с помощью ng-потока (директива, которая помогает с перетаскиванием), я не могу заставить подключиться к тому, как добавить файлы в список файлов. Если вы считаете, что мне даже не нужна директива, и я просто перехитрил это, и есть более простое решение, я тоже хотел бы внести изменения. ПРИМЕЧАНИЕ. Я даю только образцы кода, поэтому не собираю их для компиляции!

fileModelDirective:

app.directive('fileModel', ['$parse', '$log', '$confirm', 
    function ($parse, $log, $confirm) { 
     return { 
      restrict: 'A', 
      link: function (scope, element, attrs) { 
       var model = $parse(attrs.fileModel); 
       var modelSetter = model.assign; 
       scope.sampleFile = model; 
       element.bind('change', function() { 
        // if the file open dialog is raised and the file name 
        // is cleared and cancel is pressed then a reset is needed 
        // document.getElementById('file-upload-name').innerHTML = ""; 
        // document.getElementById('file-upload-btn').disabled = true; 

        // status always needs reset if choosing another file 
        scope.$apply(function() { 
         modelSetter(scope, element[0].files); 
         if (document.getElementById('file-upload').files) { 
          // This iterates over to see if the total files size is greater than 100MB 
          const maxFilesSize = 104857600; 
          var totalFilesSize = 0; 
          var numberOfDataSamples = element[0].files.length; 


         } 
        }); 
       }); 
      } // link 
     }; 
    }]); // fileModel 

fileMethod

$scope.uploadFile = function() { 
       console.log(flow) 
       var file = flow.file; 
       $scope.numberOfFiles = document.getElementById('file-upload').files.length; 
       $scope.filesTotalSize = 0; 
       for (var i = 0; i < document.getElementById('file-upload').files.length; i++) { 
        $scope.filesTotalSize = document.getElementById('file-upload').files[i].size + $scope.filesTotalSize; 
       } 

FileUpload Сервис

app.service('fileUpload', ['$http', '$log', 
    function ($http, $log) { 
     this.uploadFileToUrl = function (file, uploadUrl) { 
      //$log.debug("file(s)"); 
      //$log.debug(file); 
      var fd = new FormData(); 
      angular.forEach(file, function (value, key) { 
       fd.append(key, value); 
      }); 
      return $http.post(uploadUrl, fd, { 
       transformRequest: angular.identity, 
       headers: { 
        'Content-Type': undefined, 
        'enctype': "multipart/form-data" 
       } 
      }) 
     }; // uploadFileToUrl 
    }]); // fileUpload 

HTML

<div flow-init flow-files-submitted="$flow.upload()" class="ng-scope"> 
    <div flow-drop> 
     <span for="file-upload" 
       class="btn btn-primary" flow-btn style="margin-top: 10px; ">Upload File 
      <input id="file-upload" type="file" multiple="multiple" file-model="sampleFile" 
        style="visibility: hidden; position: absolute;"></span> 
     <p flow-prevent-drop 
      flow-drag-enter="style={border: '5px dashed purple'}" 
      flow-drag-leave="style={}" 
      ng-style="style" 
      style="margin-top: 10px;width: 100%;min-height: 50px;"> 
      Drag And Drop your file here</p> 
     <br> 
     <span ng-repeat="file in $flow.files track by $index"> 
     {{file.name + ", " }} 
    </span> 

     <div style="margin-left: 2px; margin-top: 10px;"> 
      <button id="file-upload-btn" class="btn btn-primary" 
        ng-click="showMask(); uploadFile();"> 
       Upload 
      </button> 
      <button class="btn btn-primary" style="float: right;" 
        ng-click="navigateTo('/startup')"> 
       Cancel 
      </button> 
      <button style="float: right; margin-right: 6px;" class="btn btn-primary" 
        ng-click="$flow.cancel()"> 
       Clear 
      </button> 
     </div> 
    </div> 
</div> 

Answer 1

Я просто экспериментирую с подобным сервисом. Принимая угловой массив файлов и нажимая элементы на javascript «файл-upload» .FileList-массив, но не повезло, так как свойство «files» является объектом только для чтения FileList.

Предварительно упакованное решение: http://blueimp.github.io/jQuery-File-Upload/angularjs.html и перетаскивание на всю страницу работает.

Этот номер: http://angular-file-upload.appspot.com/ имеет пасту и доступ к Камере на мобильном телефоне.

Ваше решение для добавления файлов в FormData хорошо и рядный с jquery ajaxSubmit form code

Может быть, вы могли бы создать Plnk для совместной работы над ...

formdata.append(a[i].name, a[i].value);