时间戳

首页 > 解决方案 > 以角度在框中拖动和上传多个图像

javascript - 以角度在框中拖动和上传多个图像

问题描述

有没有最好的例子可以在 angularjs 或 angular 任何版本中拖动和上传图像？我没有找到任何角度的东西。

jsfiddle

我有这个例子，但我的要求是，我在一个盒子里有一个 + 按钮。如果我将任何图像拖放到该 + 按钮上，它应该上传，并且应该在该框旁边再打开一个框。请看图片。

图片

图片

图片

像这样我需要上传更多图片。如果有任何小提琴或例子，请任何人发给我。

// 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;
  position: absolute;
  top: 0;
  left: 0;
}

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

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

.file-name {
  font-family: Arial;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<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" ng-show="image">
    <img ng-src={{image}} />
    <span class="file-name">{{imageFileName}}</span>
  </div>
</div>

标签： javascripthtmlcssangularjs

解决方案

让我们就一些步骤达成一致：

  1. 显然，要在范围内支持多个图像，您应该保留一组图像。
  2. 我们希望重新使用 dropzone，以便在用户将图像拖放到它之后，图像将在它旁边，并且用户可以放下另一个图像。因此，我们不想处理范围，我们将解析文件（src 和名称）并onDrop使用这些参数调用回调，控件本身会处理它。

请阅读我在代码中的评论

// 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: {
        // get only a drop callback which will be called with the image object
        image: '='
      },
      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() {
                // call the callback with the data
                scope.image.image = evt.target.result,
                scope.image.imageFileName = 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) {
    // keep in array instead of variables on the scope
    $scope.images = [];
    $scope.drop = (image) => {
//      console.log(image);
      $scope.images.unshift(image);
    }
  });

}).call(this);
.container {
  position: relative;
  width: 312px;
  height: 312px;
  margin: 20px;
}

.dropzone {
  border: 1px solid #ccc;
  text-align: center;
  padding: 30px;
  font-family: Arial;
  position: absolute;
  top: 0;
  left: 0;
  width: 250px;
  height: 45px;
}

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

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

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

.button {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  text-align: center;
  border: 1px solid;
  font-size: 25px;
  color: #aaa;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="reusableThings" ng-controller="TestCtrl">
  <div class="container" ng-repeat="image in images">
    <div ng-if="!image.image" class="dropzone" file-dropzone="[image/png, image/jpeg, image/gif]" image="image" data-max-file-size="3">
      <span>Drop Image Here</span>
    </div>
    <div class="image-container" ng-if="image.image">
      <img ng-src={{image.image}} />
      <span class="file-name">{{image.imageFileName}}</span>
    </div>
  </div>
  <button class="button" ng-click="images.push({})">+</button>
</div>

这可能是思路上的一些复杂变化。如果有任何不清楚的地方，请告诉我。

推荐阅读