将图像拖放到angularjs的框中

Question

我有一个在 angularjs 中拖放图像的示例。如果我拖放图像，它会向下显示。我想把图像放在盒子里。我该怎么做？

jsfiddle

请看下图。拖放此处框位于顶部图像 cmng 上。我想掉进盒子里。请帮我这样做。

// Generated by CoffeeScript 1.6.3
// Couldn't get JSFiddle to work with CoffeeScript as advertised - Link to CoffeeScript Gist: https://gist.github.com/lsiv568/5623361
(function() {
  'use strict';
  angular.module('reusableThings', []).directive('fileDropzone', function() {
    return {
      restrict: 'A',
      scope: {
        file: '=',
        fileName: '='
      },
      link: function(scope, element, attrs) {
        var checkSize, isTypeValid, processDragOverOrEnter, validMimeTypes;
        processDragOverOrEnter = function(event) {
          if (event != null) {
            event.preventDefault();
          }
          event.dataTransfer.effectAllowed = 'copy';
          return false;
        };
        validMimeTypes = attrs.fileDropzone;
        checkSize = function(size) {
          var _ref;
          if (((_ref = attrs.maxFileSize) === (void 0) || _ref === '') || (size / 1024) / 1024 < attrs.maxFileSize) {
            return true;
          } else {
            alert("File must be smaller than " + attrs.maxFileSize + " MB");
            return false;
          }
        };
        isTypeValid = function(type) {
          if ((validMimeTypes === (void 0) || validMimeTypes === '') || validMimeTypes.indexOf(type) > -1) {
            return true;
          } else {
            alert("Invalid file type.  File must be one of following types " + validMimeTypes);
            return false;
          }
        };
        element.bind('dragover', processDragOverOrEnter);
        element.bind('dragenter', processDragOverOrEnter);
        return element.bind('drop', function(event) {
          var file, name, reader, size, type;
          if (event != null) {
            event.preventDefault();
          }
          reader = new FileReader();
          reader.onload = function(evt) {
            if (checkSize(size) && isTypeValid(type)) {
              return scope.$apply(function() {
                scope.file = evt.target.result;
                if (angular.isString(scope.fileName)) {
                  return scope.fileName = name;
                }
              });
            }
          };
          file = event.dataTransfer.files[0];
          name = file.name;
          type = file.type;
          size = file.size;
          reader.readAsDataURL(file);
          return false;
        });
      }
    };
  });

}).call(this);

(function() {
  'use strict';  
    angular.module('reusableThings').controller('TestCtrl', function($scope) {
        $scope.image = null
        $scope.imageFileName = ''
    });

}).call(this);

.dropzone {
  width: 250px;
  height: 45px;
  border: 1px solid #ccc;
  text-align: center;
  padding: 30px;
  margin: 20px;
  font-family: Arial;
}

.image-container {
    width: 300px;
    height: 300px;
}

.image-container img {
   max-width: 100%;   
}

.file-name {
   font-family: Arial;   
}

<div ng-app="reusableThings" ng-controller="TestCtrl">
    <div class="dropzone" file-dropzone="[image/png, image/jpeg, image/gif]"
                  file="image" file-name="imageFileName" data-max-file-size="3">
      <span>Drop Image Here</span>
    </div>
    <div class="image-container">
      <img ng-src={{image}} />
      <span class="file-name">{{imageFileName}}</span>
    </div>
</div>

Answer 1

如果我理解正确，您希望拖放的图像呈现在框的顶部，而不是在框之后。我想我解决了。查找JSFiddle here

变化：

• 为.dropzone 添加了 CSS 以修复其位置

.dropzone {
    width: 250px;
    height: 45px;
    border: 1px solid #ccc;
    text-align: center;
    padding: 30px;
    margin: 20px;
    font-family: Arial;

    /* New CSS */
    position: absolute;
    top: 0;
    left: 0;
}

• 向.image-container 添加了CSS，以将其位置固定在.dropzone 的位置之上。还调整了宽度以完全匹配 .dropzone 的宽度，并添加了 z-index: 2; 以便图像显示在顶部。

.image-container {
    width: 312px;
    height: 312px;
    margin: 20px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

• 在.image-container 上添加了ng-show="image"，以便在没有图像时将其隐藏，否则图像拖放目标将是该元素而不是.dropzone，因为z-index。

<div class="image-container" ng-show="image">
  <img ng-src={{image}} />
  <span class="file-name">{{imageFileName}}</span>
</div>

希望这会有所帮助:)