如何使用AngularJS检查kendo文件上传中的文件类型?

问题描述 投票:0回答:1

我使用AngularJs上传了kendo文件,这对上传很有用,另一个要求是Document Category is dropdown(Excel,Pdf,Word)。让我们假设用户从下拉列表中选择excel如何限制用户使用onSelect方法仅选择excel文件?

到目前为止尝试了下面的代

main.html中

<form name="addRiskForm" novalidate class="border-box-sizing">
        <div class="modalForm">
            <div class="row">
                <div class="form-group col-md-12">
                    <label for="docCate" class="col-md-4">Document Category:</label>
                    <div class="col-md-8">
                       <select
                            kendo-drop-down-list
                            data-text-field="'text'"
                            data-value-field="'id'" name="attchCategory"
                            k-option-label="'Select'"
                            ng-model="attchCategory"
                            k-data-source="docCategoryOptions"
                            id="docCate">
                        </select>
                    </div>
                </div>
            </div>
               <div class="row">
                <div class="form-group col-md-12 fieldHeight">
                    <label for="issueNo" class="col-md-4">File name:</label>
                        <div class="col-md-6">
                          <input name="file"
                            type="file"
                            kendo-upload="fileAttachment"
                            k-upload="addMorePostParameters"
                            k-success="onSuccess"
                            k-error = "onError"
                            k-multiple="true"
                            k-options="fileAttachmentOptions"
                            k-select="onSelect"
                            />
                        </div>
                </div>
            </div>
        </div>
</form>

Ctrl.js

 $scope.fileAttachmentOptions = assessmentDocConfig.fileAttachmentConfig;
    $scope.docCategoryOptions = kendoCustomDataSource.getDropDownDataSource('RA_ATACH_TYP');
      $scope.$on('addDocument', function (s,id){
        $scope.riskAssessmentDTO.riskAssessmentKey = id;
        $scope.viewDocumentWin.open().center();
      });
      $scope.addMorePostParameters = function (e) {
        if (!$scope.attchCategory) {
            e.preventDefault();
        } else if (!$scope.attchDesc) {
            e.preventDefault();
        } else {
            e.data = {
                attchCategory:$scope.attchCategory,
                attchDesc: $scope.attchDesc,
                riskAssessmentKey: $stateParams.assessmentId,
            };
        }
    };

    $scope.onSuccess = function () {
      $log.info('Upload Successfull...');
      $scope.attchCategory = '';
      $scope.attchDesc = '';
      var filesToBeRemoved = $scope.fileAttachment.wrapper.find('.k-file');
      $scope.fileAttachment._removeFileEntry(filesToBeRemoved);
      console.log('Attachment Successfully Saved');
      $scope.viewDocumentWin.close();
    };
    $scope.onSelect = function (e) {
      $.each(e.file, function (index, value) {
          var ok = value.extension == ".xlsx"
                   || value.extension == ".pdf"
                   || value.extension == ".doc"
                   || value.extension == ".html";

          if (value.extension === ok) {
              e.preventDefault();
              alert("Please upload jpg image files");
          }
      });
  };
    $scope.onError = function () {
      $log.info('Upload Errored out...');
      console.log('Error while uploading attachment');
    };

config.js

fileAttachmentConfig: {
  async: {
      saveUrl: 'app/upload/uploadAttch',
      removeUrl: 'remove',
      removeVerb: 'DELETE',
      autoUpload: false
  },
  template: '<span class=\'file-name-heading\'>Name:</span> <span>#=name#</span><button type=\'button\' class=\'k-upload-action\'></button>'
}
angularjs file-upload kendo-ui
1个回答
0
投票

您可以使用validation.allowedExtensions属性,例如:

config.js

fileAttachmentConfig: {
  async: {
      saveUrl: 'app/upload/uploadAttch',
      removeUrl: 'remove',
      removeVerb: 'DELETE',
      autoUpload: false
  },
  template: '<span class=\'file-name-heading\'>Name:</span> <span>#=name#</span><button type=\'button\' class=\'k-upload-action\'></button>',
  validation: {
      allowedExtensions: ["doc", "txt", "docx", "pdf", "jpg", "jpeg", "png", "xlsx", "xls"],
      maxFileSize: 20000000, //20mb (in bytes)
  }
}

在您的特定示例中,您需要使其动态化,因此您应该能够根据您在下拉列表中选择的内容调整配置对象中的值。因此,不是引用静态数组,而是引用可在运行时更改的变量。

进一步文件:

© www.soinside.com 2019 - 2024. All rights reserved.