【发布时间】:2014-02-06 21:42:42
【问题描述】:
我正在使用基本的 Fine Uploader。 我收到消息 Access is denied in native IE9 (not in IE11 with IE9 compatible) 当我选择上传按钮时会发生这种情况,我的意思是,之前我选择了文件并且添加得很好。然后我点击调用服务的按钮,我得到了错误。
我读到它可能是 IE 中的安全设置,但不确定为什么它在兼容的 IE11 和其他浏览器中有效,而在本机 IE9 中无效。
这是控制台日志:
***LOG:[FineUploader 4.2.1] 收到 1 个文件或输入。 LOG: [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"]}} {{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"]}} {{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>
额外按钮:
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>
【问题讨论】:
-
从您的问题中不清楚发生错误的位置。问题是在文件发送之前发生,还是在响应来自您的服务器时发生?如果是前者,那么您需要显示您的客户端代码。如果是后者,你的服务器响应有问题。
-
问题发生在文件发送之前。我添加了发送文件的代码部分。如果您需要更多信息,请告诉我。
-
您没有显示足够的代码。您需要显示与 Fine Uploader 集成相关的所有客户端代码。最有可能的是,您正在使用 javascript 触发文件选择器对话框,这在 IE 中是不允许的。
-
你是对的,我正在为输入类型文件调用点击事件,因为我不得不做一个棘手的事情,因为在 IE9 中,当我选择文件并获得 DOM 元素时,调用 manualuploader .addFiles(document.getElementById("fileId"); 它消失了,但它仍然添加到manualuploader的集合中。
标签: internet-explorer-9 fine-uploader