我正在使用基本的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"]}} {{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>
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>
答案 0 :(得分:1)
如FAQ on docs.fineuploader.com中所述,您无法以编程方式触发文件选择器对话框。这不是Fine Uploader的限制,它是Internet Explorer非常重视的安全限制。
无论如何,没有明显的理由以编程方式使用Fine Uploader调用文件选择器对话框,因为它为您提供了default customizable file chooser button和ability to contribute additional chooser buttons。您必须允许用户单击这些按钮。如果您需要以编程方式将<input type="file">
,File
或Blob
提交给Fine Uploader,则可以通过addFiles
或addBlobs
API方法执行此操作。