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 –