5

悪名高い bluimp jQuery ファイル アップローダを AngularJS プロジェクトに統合するために、次のチュートリアルに従いました。

いくつかの調査の結果、jquery.fileuploader.js ファイルを使用して options 配列に autoUpload というオプションがあることがわかりました。このオプションを true に設定すると、ファイルが自動的にアップロードされます。私はそれを無効にしようとしましたが(偽、未定義)、フォームの送信でもアップロードがまったく機能しないことがすぐにわかりました。

別のコールバック内で、またはクリックイベントによって、アップロードを手動でトリガーする必要があります。それはできますか?

コード:

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>
4

1 に答える 1