上傳一個AngularJS和bluimp成功回調另一種形式的文件

Question

我跟着following教程，以便將臭名昭着的bluimp jQuery文件上傳器集成到我的AngularJS項目中。

經過一番研究，我發現在選項數組中，有一個名爲autoUpload的選項，它在設置爲true時自動上傳文件。 我試圖禁用它（false，未定義），但很快我發現這導致上傳根本不起作用，甚至沒有提交表單。

我需要手動觸發上傳，在另一個回調或單擊事件中說。 可以這樣做嗎？

代碼：

app.directive("fileupload", function() { 
    return { 
     restrict: "A", 
     scope: { 
     done: "&", 
     progress: "&", 
     fail: "&", 
     uploadurl: "=", 
     customdata: "&" 
     }, 
     link: function(scope, elem, attrs) { 
     var uploadOptions; 
     uploadOptions = { 
      url: scope.uploadurl, 
      dataType: "json" 
     }; 
     if (scope.done) { 
      uploadOptions.done = function(e, data) { 
      return scope.$apply(function() { 
       return scope.done({ 
       e: e, 
       data: data 
       }); 
      }); 
      }; 
     } 
     if (scope.fail) { 
      uploadOptions.fail = function(e, data) { 
      return scope.$apply(function() { 
       return scope.fail({ 
       e: e, 
       data: data 
       }); 
      }); 
      }; 
     } 
     if (scope.progress) { 
      uploadOptions.progress = function(e, data) { 
      return scope.$apply(function() { 
       return scope.progress({ 
       e: e, 
       data: data 
       }); 
      }); 
      }; 
     } 
     return elem.fileupload(uploadOptions).bind("fileuploadsubmit", function(e, data) { 
      return data.formData = { 
       JSON.stringify(scope.customdata()) 
      }; 
     }); 
     } 
    }; 
    }); 
app.service('uploadService', function(authService) { 
    var initializeFn, processFn; 
    initializeFn = function(e, data, process) { 
     var upload; 
     return upload = { 
     message: '', 
     uploadurl: authService.getBaseUrl() + '/applications/', 
     status: false 
     }; 
    }; 
    processFn = function(e, data, process) { 
     var file, upload; 
     upload = {}; 
     upload.successData = []; 
     upload.status = true; 
     upload.error = false; 
     if (process === 'done') { 
     upload.message = data.result.result; 
     console.log(data); 
     file = data.result.resume; 
     upload.successData = { 
      // name: file.name, 
      // fullUrl: file.url, 
      // thumbUrl: file.thumbnail_url 
     }; 
     } else if (process === 'progress') { 
     upload.message = 'Uploading....!!!'; 
     } else { 
     upload.error = true; 
     upload.message = 'Please try again'; 
     console.log(e, data); 
     } 
     return upload; 
    }; 
    return { 
     process: processFn, 
     initialize: initializeFn 
    }; 

    }); 

app.controller('applyCtrl', function($scope, $routeParams, uploadService){ 
     $scope.model.formData = {}; 
     $scope.model.formData.job = $routeParams.jobId; 
     $scope.uploadLayer = function(e, data, process) { 
      return $scope.uploadReturn = uploadService.process(e, data, process); 
     }; 
     $scope.customData = function() { 
      return $scope.model.formData; 
     }; 
     return $scope.uploadReturn = uploadService.initialize(); 

}); 

觀點：

<form class="applyForm" ng-submit="uploadLayer(e, data, 'progress')"> 
     <fieldset> 
      <div class="formLine"> 
       <div class="wideFieldContainer"> 
        <input id="testUpload" type="file" fileupload customdata="customData()" name="resume" uploadurl="uploadReturn.uploadurl" done="uploadLayer(e, data, 'done')" fail="uploadLayer(e, data, 'fail')" progress="uploadLayer(e, data, 'progress')" /> 
       </div> 
      </div> 
        </fieldset> 
      </form> 

腳本加載順序：

... 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script src="lib/angular/angular.js"></script> 
    <script src="lib/angular/angular-resource.js"></script> 
    <script src="js/app.js"></script> 
    <script src="js/services.js"></script> 
    <script src="js/controllers.js"></script> 
    <script src="js/filters.js"></script> 
    <script src="js/directives.js"></script> 
    <script src="lib/bluimp/js/vendor/jquery.ui.widget.js"></script> 
    <script src="lib/bluimp/js/jquery.piframe-transport.js"></script> 
    <script src="lib/bluimp/js/jquery.fileupload.js"></script> 
</body> 
</html> 

Answer 1

Blueimp有可用的jQuery文件上傳的AngularJS版本。

它包括一個fileUpload指令和一個FileUploadController與submit()方法，您可以手動調用。

您可以在http://blueimp.github.io/jQuery-File-Upload/angularjs.html上看到工作版本。

你應該注意的一件事：確保你以正確的順序加載示例中的所有.js文件以避免問題（參見示例頁面的源代碼）。

希望有幫助！

---

更新後，您的評論：

當使用jQuery文件上傳的AngularJS版本，您可以創建與file-upload屬性像這樣的表單標籤：

<!-- Create a file upload form with options passed in from your scope --> 
<form data-file-upload="options" data-ng-controller="YourController"> 

    <!-- This button will trigger a file selection dialog --> 
    <span class="btn btn-success fileinput-button" ng-class="{disabled: disabled}"> 
     <span>Add files...</span> 
     <input type="file" name="files[]" multiple="" ng-disabled="disabled"> 
    </span> 

    <!-- This button will start the upload --> 
    <button type="button" class="btn btn-primary start" data-ng-click="submit()"> 
     <span>Start upload</span> 
    </button> 

<form> 

然後在你的控制器，你可以像這樣分配用於jQuery文件上傳的選項：

angular.module('yourModule') 
    .controller('YourController', [$scope, function($scope){ 

     // Options you want to pass to jQuery File Upload e.g.: 
     $scope.options = { 
      maxFileSize: 5000000, 
      acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i 
     }; 
    }]); 

只要它在表單內（因此可以訪問方法），就可以將submit()處理程序分配給任何ng-click屬性。

讓我知道如果你需要進一步的幫助......

---

EXTRA示例代碼成功回調：

如果你需要運行畢竟上傳已完成的回調函數，你可以聽由Blueimp廣播的fileuploadstop事件：

// Listen to fileuploadstop event 
$scope.$on('fileuploadstop', function(){ 

    // Your code here 
    console.log('All uploads have finished'); 
}); 

希望幫助！