Fine-Uploader访问被拒绝

时间:2014-02-06 21:42:42

标签: internet-explorer-9 fine-uploader

我正在使用基本的Fine Uploader。 我收到消息在本机IE9中拒绝访问(不兼容IE9与IE9兼容) 当我选择上传按钮时会发生这种情况,我的意思是,之前我选择了该文件并且添加正常。然后我点击调用服务的按钮,我收到错误。

我读到它可能是IE中的安全设置,但不确定为什么它在IE11中兼容并且在其他浏览器中工作,而不是在本机IE9中。

这是控制台日志:

***日志:[FineUploader 4.2.1]收到1个文件或输入。 日志:[FineUploader 4.2.1]发送0的上传请求 错误:访问被拒绝。

日志:[FineUploader 4.2.1]收到0_940f74c7-55dd-4ff2-a4b9-a01a2a80a917 ***的回复

有没有解决方法呢?

此致

[编辑]

(我删除了上传文件时未使用的一些功能,只是为了缩短代码)

JS(角度控制器)

  dApp.controller('BPDocumentsController',['$scope', 'BPDocument', 'BPDocuments',
      function BPDocumentsController($scope, BPDocument, BPDocuments) {
       var manualuploader = null;

       $scope.resetUploadDocumentForm = function () {
           $("input[type='file']").val(null);
           $scope.seletedFile = '';
           $scope.fileToUpload = null;
           $scope.documentTitle = '';
           $scope.certify = false;
           $scope.yourName = '';
           $scope.yourTitle = '';
       };

       $scope.resetCustomValidations= function () {
           $scope.uploadDocumentForm.file.$setValidity("filetype", true);
           $scope.uploadDocumentForm.file.$setValidity("size", true);
           $scope.uploadDocumentForm.documentTitle.$setValidity("documentTitleUnique", true);
       };

       $scope.closeUploadDocumentForm = function () {
           $scope.resetUploadDocumentForm();
           $scope.resetCustomValidations();
           $scope.uploadDocumentForm.$setPristine(true);
           $scope.showPopUp = false;
       };



       $scope.uploadDocument = function () {

           var model = {
               BusinessPartnerId: $scope.businessPartnerId,
               Title: $scope.documentTitle,
               CertifiedByName : $scope.yourName,
               CertifiedByTitle: $scope.yourTitle
           };
           var data = { model: model  };

           manualuploader.setParams(model);
           manualuploader.uploadStoredFiles();

           //clean and close popup
           $scope.closeUploadDocumentForm();         
       };

       function initializeFileUploadControl() {
           manualuploader = new qq.FineUploaderBasic({
               element: document.getElementById('manual-fine-uploader'),
               request: {
                   endpoint:  bpDetailsServiceUrl + "BPDocuments"
               },
               autoUpload: false,
               multiple: false,
               validation: {
                   sizeLimit: $scope.fileMaxSizeInBytes,
                   allowedExtensions: $scope.allowedExtensions
               },
               messages: {
                   typeError: "invalidFileExtension",
                   sizeError: "invalidFileSize"
               },
               debug: true,

               callbacks: {
                   onComplete:
                     function (id, name, responseJSON, xhr) {

                         var document = new Object();
                         document = {
                             BusinessPartnerDocumentId: responseJSON.BusinessPartnerDocumentId,
                             FileExtension: responseJSON.FileExtension,
                             Title: responseJSON.Title
                         };

                         $scope.companyTabSelected ? $scope.companyDocumentList.push(document) : $scope.bpDocumentList.push(document);
                         $scope.$apply();
                     },
                   onError: function(id, fileName, reason, maybeXhr) {
                       if (reason == 'invalidFileExtension') {
                           $scope.uploadDocumentForm.file.$setValidity("filetype", false);
                       }
                       if (reason == 'invalidFileSize') {
                           $scope.uploadDocumentForm.file.$setValidity("size", false);
                       }

                   }
               }
           })


       };

       $scope.setFile = function () {
           $scope.$apply(function ($scope) {
               $scope.fileToUpload = null;
               $scope.uploadDocumentForm.file.$setValidity("filetype", true);
               $scope.uploadDocumentForm.file.$setValidity("size", true);

               $scope.fileName = document.getElementById("fileId");
               $scope.fileToUpload = $scope.fileName != undefined && $scope.fileName != '';

               manualuploader.clearStoredFiles();
               manualuploader.addFiles($scope.fileName);

           });
       };

       initializeModel();
       initializeFileUploadControl();

       function initializeModel() {
           var data = JSON.parse($("#BusinessPartnerDocumentData").html());

           $scope.allowedExtensions = ['doc', 'docx', 'xls', 'xlsx', 'pdf'];

           $scope.showCompanyTab = data.ShowCompanyTab;
           $scope.showBPTab = data.ShowBPTab;
           $scope.companyDocumentList = data.CompanyDocumentList;
           $scope.bpDocumentList = data.BPDocumentList;
           $scope.uploadButtonEnabled = data.UploadButtonEnabled;
           $scope.fileMaxSizeInBytes = data.FileMaxSizeInBytes;
           $scope.businessPartnerId = data.BusinessPartnerId;
           $scope.fileName = '';
           $scope.companyTabSelected = $scope.showCompanyTab;
           $scope.bpTabSelected = !$scope.showCompanyTab && $scope.showBPTab ? true : false;
           $scope.resetUploadDocumentForm();
       }
   }]);

HTML

  <div ng-controller="BPDocumentsController">
        <div class="ng-modal" ng-show="showPopUp">
       <div class="ng-modal-overlay"></div>
       <div class="ng-modal-dialog dcp-color-box">
           <div class="ng-modal-close" ng-click="closeUploadDocumentForm()">X</div>
           <div class="pop-up-title">
            <span>{{translations["lblAcceptableFormats"]}}&nbsp;{{allowedExtensions.join(', ')}}</span>

        </div>
        <div class="ng-modal-dialog-content dcp-white-box wdt-500">



            <ng-form name="uploadDocumentForm" novalidate="">
        <div class="pdn-b10 pop-up-note">
            <span class="alert-col">* </span>
            <span>{{translations["lblIndicatesRequiredField"]}}</span> 
        </div>

        <div class="dcp-label-title">
            {{translations["lblChooseDocumentUpload"]}}
            <span class="alert-col">*</span>
        </div>
             <input type="file" id="fileId" name="file" ng-model="tempFile" onchange="angular.element(this).scope().setFile()"/>
        <div ng-show="uploadDocumentForm.file.$invalid">
            <span class="error-message" ng-show="uploadDocumentForm.file.$error.size">{{translations["lblFilesNotLargerThan5MB"]}}</span>
            <span class="error-message" ng-show="uploadDocumentForm.file.$error.filetype">{{translations["lblAcceptableFormats"]}}&nbsp;{{allowedExtensions.join(', ')}}</span>
        </div> 

        <div class="dcp-label-title">
            {{translations["lblDocumentTitle"]}}
            <span class="alert-col">*</span>
        </div>
        <input type="text" name="documentTitle" class="dcp-form-textbox wdt-250 mrg-b10" ng-model="documentTitle" ng-minlength=3 ng-blur="lookUpDocument()" required />
        <div ng-show="uploadDocumentForm.documentTitle.$dirty && uploadDocumentForm.documentTitle.$invalid">
            <span class="error-message" ng-show="uploadDocumentForm.documentTitle.$error.minlength">{{translations["cvTitleMinimumLength"]}}</span>
            <span class="error-message" ng-show="uploadDocumentForm.documentTitle.$error.documentTitleUnique">{{translations["lblTitleError"]}}</span>
        </div>            
        <div class="pop-up-note-b mrg-b10 clearfix">
            <span>{{translations["lblTitleDocumentCenter"]}}</span>
        </div>
        <div class="clearfix">
            <input type="checkbox" name="certify" ng-model="certify" required/>
            <span>{{translations["cbCertify"]}}</span>
            <span class="error-message">*</span>
        </div>

        <div class="dcp-label-title">
            {{translations["lblYourName"]}}
            <span class="error-message">*</span>
        </div>
        <input type="text" name="yourName" class="dcp-form-textbox wdt-250 mrg-b10" ng-model="yourName" required />

        <div class="dcp-label-title">
            {{translations["lblYourTitle"]}}
            <span class="error-message">*</span>
        </div>
        <input type ="text" name="yourTitle" class="dcp-form-textbox wdt-250 mrg-b10" ng-model="yourTitle" ng-minlength=3 required/>
        <div ng-show="uploadDocumentForm.yourTitle.$dirty && uploadDocumentForm.yourTitle.$invalid">
            <span class="error-message" ng-show="uploadDocumentForm.yourTitle.$error.minlength">{{translations["cvTitleMinimumLength"]}}</span>
        </div>

        <div class="dcp-box-buttons">
            <span class="f-l">{{now}}</span>
            <button type="button" ng-click="uploadDocument()" ng-disabled="uploadDocumentForm.$invalid || !fileToUpload" ng-class="{'dcp-color-btn-disable':uploadDocumentForm.$invalid || !fileToUpload, 'dcp-color-btn':uploadDocumentForm.$valid && fileToUpload}">{{translations["btnSubmit"]}}</button>
            <button type="reset" class="dcp-color-btn" ng-click="closeUploadDocumentForm()">{{translations["btnCancel"]}}</button>
        </div>
</ng-form>
        </div>
    </div>
</div>

EXTRA BUTTON:

function initializeFileUploadControl() {
            manualuploader = new qq.FineUploaderBasic({
                element: document.getElementById('manual-fine-uploader'),
                request: {
                endpoint:  bpDetailsServiceUrl + "BPDocuments"
            },
            autoUpload: false,
            multiple: false,
            validation: {
                sizeLimit: $scope.fileMaxSizeInBytes,
                allowedExtensions: $scope.allowedExtensions
            },
            extraButtons: [
                 {
                     element: $("#pdfButton"),
                 }
                    ],
            messages: {
                typeError: "invalidFileExtension",
                sizeError: "invalidFileSize"
            },
            debug: true,

            callbacks: {
                onComplete:
                  function (id, name, responseJSON, xhr) {

                      var document = new Object();
                      document = {
                          BusinessPartnerDocumentId: responseJSON.BusinessPartnerDocumentId,
                          FileExtension: responseJSON.FileExtension,
                          Title: responseJSON.Title
                      };

                      $scope.companyTabSelected ? $scope.companyDocumentList.push(document) : $scope.bpDocumentList.push(document);
                      $scope.$apply();
                  },
                onError: function(id, fileName, reason, maybeXhr) {
                    if (reason == 'invalidFileExtension') {
                        $scope.uploadDocumentForm.file.$setValidity("filetype", false);
                    }
                    if (reason == 'invalidFileSize') {
                        $scope.uploadDocumentForm.file.$setValidity("size", false);
                    }

                }
            }
        })


    };

额外按钮的HTML:

 <div id="pdfButton" style="background-color:gray">Select a PDF</div>
 <div id="uploader"></div>

1 个答案:

答案 0 :(得分:1)

FAQ on docs.fineuploader.com中所述,您无法以编程方式触发文件选择器对话框。这不是Fine Uploader的限制,它是Internet Explorer非常重视的安全限制。

无论如何,没有明显的理由以编程方式使用Fine Uploader调用文件选择器对话框,因为它为您提供了default customizable file chooser buttonability to contribute additional chooser buttons。您必须允许用户单击这些按钮。如果您需要以编程方式将<input type="file">FileBlob提交给Fine Uploader,则可以通过addFilesaddBlobs API方法执行此操作。