加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

使用AngularJS和bluimp上传文件,成功回调另一个表单

发布时间:2020-12-17 06:54:15 所属栏目:安全 来源:网络整理
导读:我遵循了 following教程,以便在我的AngularJS项目中集成臭名昭着的bluimp jQuery文件上传器. 经过一些研究,我发现在options数组中,在jquery.fileuploader.js文件中,有一个名为autoUpload的选项,当设置为true时会自动上传文件. 我试图禁用它(假,未定义),但很
我遵循了 following教程,以便在我的AngularJS项目中集成臭名昭着的bluimp jQuery文件上传器.

经过一些研究,我发现在options数组中,在jquery.fileuploader.js文件中,有一个名为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,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,process) {
          return $scope.uploadReturn = uploadService.process(e,process);
        };
        $scope.customData = function() {
            return $scope.model.formData;
        };
        return $scope.uploadReturn = uploadService.initialize();

});

视图:

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

解决方法

Blueimp有一个AngularJS版本的jQuery文件上传功能.

它包含一个fileUpload指令和一个FileUploadController,它带有一个可以手动调用的submit()方法.

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

您应该注意的一件事是:确保以正确的顺序从示例中加载所有.js文件以避免出现问题(参见示例页面的源代码).

希望有所帮助!

您的评论后更新:

使用AngularJS版本的jQuery文件上载时,您可以创建一个带有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属性,只要它在表单内(因此可以访问该方法).

如果您需要进一步的帮助,请告诉我…

用于成功回拨的额外示例代码:

如果您需要在完成所有上传后运行回调函数,您可以收听Blueimp广播的fileuploadstop事件:

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

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

希望有所帮助!

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读