使用FileList拖放AngularJs

Question

我對前端開發非常陌生，我認爲將拖放添加到當前上載頁面會很酷。然而，在開始用ng-flow（一個輔助拖放操作的指令）把所有東西都鉤住後，我似乎無法建立關於如何將文件添加到文件列表的連接。如果你認爲我甚至不需要這個指令，並且只是過度使用這個指令，而且有一個更簡單的解決方案，我也願意進行更改。注：我只給出代碼的樣本，所以不要編譯它！

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; 
       } 

文件上傳服務

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「文件上傳」.FileList數組，但沒有運氣，因爲'文件'屬性是一個只讀的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);