0
我想在Angular js/MVC中實現簡單的文件拖放功能。Angular js/MVC中的文件拖放功能不起作用
我創建了一個拖放指令。
(function (angular, undefined) {
'use strict';
angular.module('fileupload', [])
.directive("myDirective", function ($parse) {
return {
restrict: 'A',
link: fileDropzoneLink
};
function fileDropzoneLink(scope, element, attrs) {
element.bind('dragover', processDragOverOrEnter);
element.bind('dragenter', processDragOverOrEnter);
element.bind('dragend', endDragOver);
element.bind('dragleave', endDragOver);
element.bind('drop', dropHandler);
var onImageDrop = $parse(attrs.onImageDrop);
//When a file is dropped
var loadFile = function (files) {
scope.uploadedFiles = files;
scope.$apply(onImageDrop(scope));
};
function dropHandler(angularEvent) {
var event = angularEvent.originalEvent || angularEvent;
var files = event.dataTransfer.files;
event.preventDefault();
loadFile(files)
}
function processDragOverOrEnter(angularEvent) {
var event = angularEvent.originalEvent || angularEvent;
if (event) {
event.preventDefault();
}
event.dataTransfer.effectAllowed = 'copy';
element.addClass('dragging');
return false;
}
function endDragOver() {
element.removeClass('dragging');
}
}
});
}(angular));這是模板
<div class="dropzone" data-my-Directive on-image-drop="$ctrl.fileDropped()">
Drag and drop pdf files here
</div>這是我的組件代碼
(function (angular, undefined) {
'use strict';
angular.module('test', [])
.component('contactUs', contactUs());
function contactUs() {
ContactUs.$inject = ['$scope', '$http'];
function ContactUs($scope, $http) {
var ctrl = this;
ctrl.files = [];
ctrl.services = {
$scope: $scope,
$http: $http,
};
}
//file dropped
ContactUs.prototype.fileDropped = function() {
var ctrl = this;
var files = ctrl.services.$scope.uploadedFiles;
angular.forEach(files, function (file, key) {
ctrl.files.push(file);
});
}
return {
controller: ContactUs,
templateUrl: 'partials/home/contactus/'
};
}
}(angular));有時拖放作品精絕沒有任何問題。但是有時候我會遇到下面的問題，拖放不起作用，我得到黑色的無效光標。
這個問題是隨機的，我沒有看到在控制檯中的任何錯誤。
而且我也嘗試像其他第三方組件角文件上傳 https://github.com/nervgh/angular-file-upload，我看到與該組件完全相同的問題也。
感謝維傑但我仍然看到了同樣的問題，我注意到，當我嘗試運行的代碼在普通的HTML文件，並沒有VisualStudio中運行/ IIS中的文件被刪除的網頁上，它的作品，但我當在visual studio/iis中運行相同的代碼我看到上面的奇怪問題 –
噢好吧。然後它可能是Visula studio中的一些設置。如何在Visual Studio中打開網頁？看到這個鏈接：https://stackoverflow.com/questions/15226600/visual-studio-does-not-let-me-drag-drop-items-into-it –
不知道這是它，但你可以請看看在帖子底部的解決方案。可能只是Visual Studio的是Visual Studio中： https://www.devexpress.com/Support/Center/Question/Details/T520060/dxfileuploader-drag-and-drop-is-not-working-in-ie11-when -running-a-web-project-in-visual –