Question

这似乎是一件很直接的事情，但出于某种原因，我无法阻止默认的行为重定向。

HTML：

<div dropimg>
</div>

指令：

marketApp.directive('dropimg', function(){
return function($scope, $element){

    //EVENT: drag enter
    $element.bind('dragenter dragover', function(){
        $element.addClass("dragging");
    });
      //EVENT: drag exit
    $element.bind('dragleave dragexit', function(){
        $element.removeClass("dragging");
    });

    //EVENT: drop
    $element.bind('drop', function(e){
        if (e.preventDefault) e.preventDefault();
        if (e.stopPropagation) e.stopPropagation();

            alert("something dropped");
    });
}
});

Answer 1

我怀疑您必须取消dragenter和dragexit事件中的默认操作。不要问我为什么，read this instead (Warning: strong wording)。

Answer 2

<div class="new-img" file-dropzone="[image/png, image/jpeg, image/gif]" file="project.image" file-name="project.imageFileName" data-max-file-size="3">
                <img ng-init=" file='/static/images/drag-drop-icon.jpg'"  ng-src={[{file}]} class="img-project" width="154px" height="115px" />
            </div>

试试这个

App.directive('fileDropzone', function() {

return {
    restrict: 'A',
    scope: {
        file: '=',
        fileName: '='
    },
    compile: function(element, attrs){
        //var clases = attrs.hasOwnProperty('class') ? attrs.class : "";
        var divInputFile = angular.element('<div></div>');
        divInputFile.css('width','150px').css('height','50px').css('overflow','hidden');

        var divChooseImg = angular.element('<div></div>');
        divChooseImg.addClass('choose-img');

        var buttonChooseImg = angular.element('<button></button>');
        buttonChooseImg.css('width','110px').css('height','30px').css('position','relative').css('top','-5px').css('left','-5px');

        var liChooseImg = angular.element('<li>Elegir imagen</li>');

        var inputFile = angular.element('<input></input>');
        inputFile.attr('type','file').attr('name','upload').css('font-size','40px').css('width','150px').css('opacity','0').css('filter','alpha(opacity: 0)').css('position','relative').css('top','-38px').css('left','0px');

        buttonChooseImg.append(liChooseImg);
        divChooseImg.append(buttonChooseImg);
        divInputFile.append(divChooseImg);
        divInputFile.append(inputFile);
        element.append(divInputFile);

        return function (scope, element, attrs, controller) {
            var checkSize, isTypeValid, processDragOverOrEnter, validMimeTypes;

            handleFileSelect = function(evt) {

                evt.stopPropagation();
                evt.preventDefault();

                element.removeClass('nydragover');

                var file, name, reader, size, type;
                reader = new FileReader();

                if(evt.type == "drop"){
                    var files = evt.originalEvent.dataTransfer.files; // FileList object.
                }else{
                    var files = evt.target.files;
                }
                var file= files[0];
                name = file.name;
                type = file.type;
                size = file.size;
                reader.readAsDataURL(file);
                reader.onload = function(evt2) {
                    if (checkSize(size) && isTypeValid(type)) {
                      return scope.$apply(function() {
                        scope.file = evt2.target.result;

                        //if (angular.isString(scope.fileName)) {
                          return scope.fileName = name;
                        //}
                      });
                    }
                };


                return false;
            };

            handleDragOver = function(evt) {           
                evt.stopPropagation();
                evt.preventDefault();
                evt.originalEvent.dataTransfer.dropEffect = 'copy';
                element.addClass('nydragover');
            };

            handleDragLeave = function(evt){
                element.removeClass('nydragover');
            };

            validMimeTypes = attrs.nyFileDropzone;
            checkSize = function(size) {
              var _ref;
              if (((_ref = attrs.maxFileSize) === (void 0) || _ref === '') || (size / 1024) / 1024 < attrs.maxFileSize) {
                return true;
              } else {
                alert("El archivo debe pesar menos de " + attrs.maxFileSize + " MB");
                return false;
              }
            };

            isTypeValid = function(type) {
              if ((validMimeTypes === (void 0) || validMimeTypes === '') || validMimeTypes.indexOf(type) > -1) {
                return true;
              } else {
                alert("Tipo de archivo inválido.  El archivo debe ser de alguno de los siguientes tipos: " + validMimeTypes);
                return false;
              }
            };

            element.bind('dragover', handleDragOver);
            element.bind('dragleave', handleDragLeave)
            element.bind('drop', handleFileSelect);
            inputFile.bind('change', handleFileSelect);
        }
    }

};
});

角度简单图像丢弃不会阻止默认和重定向

2 个答案: