Question

＆＃13;

angular.module('app',[])
  .controller("upload", ['$scope', '$http', 'uploadService', function($scope, $http, uploadService) {
    $scope.$watch('file', function(newfile, oldfile) {
      if(angular.equals(newfile, oldfile) ){
        return;
      }
    });

  }])
  .service("uploadService", function($http, $q) {

    return ({
      upload: upload
    });

    function upload(file) {
      var upl = $http({
        method: 'POST',
        url: '', // /api/upload
        headers: {
          'Content-Type': ''
        },
        data: {
          upload: file
        },
        transformRequest: function(data, headersGetter) {
          var formData = new FormData();
          angular.forEach(data, function(value, key) {
            formData.append(key, value);
          });

          var headers = headersGetter();
          delete headers['Content-Type'];

          return formData;
        }
      });
      return upl.then(handleSuccess, handleError);

    }
  })
  .directive("fileinput", [function() {
    return {
      scope: {
        fileinput: "=",
        filepreview: "="
      },
      link: function(scope, element, attributes) {
        element.bind("change", function(changeEvent) {
          scope.fileinput = changeEvent.target.files[0];
          var reader = new FileReader();
          reader.onload = function(loadEvent) {
            scope.$apply(function() {
              scope.filepreview = loadEvent.target.result;
            });
          }
          reader.readAsDataURL(scope.fileinput);
        });
      }
    }
  }]);

＆＃13;

img.art_img_prev_use
{
    width:250px;
	  height:250px;
    position: absolute;
    top:0px;
    left:0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="prev_img_bar_widt" ng-app="app" ng-controller="upload">
  <form>
    <div class="prev_img_arti-te_xt">
      <input type="file" fileinput="file" filepreview="filepreview"/>
        <img class="art_img_prev_use" ng-src="{{filepreview}}" ng-show="filepreview"/>
    </div>
  </form>
</div>

＆＃13;

嘿，我尝试在角度和外翻中进行简单的图像预览似乎工作得很好，但是我无法解决的一个问题。问题：如何添加两个按钮＆＃34;删除图像＆＃34;和＆＃34;改变形象＆＃34;上传图片后我想在添加图片之前看不到按钮吗？

Answer 1

您可以在更改file输入后设置标记，并使用此标记显示/不显示使用ng-if的按钮。

    element.bind("change", function(changeEvent) {
      scope.fileinput = changeEvent.target.files[0];
      var reader = new FileReader();
      reader.onload = function(loadEvent) {
        scope.$apply(function() {
          scope.filepreview = loadEvent.target.result;
        });
      }
      reader.readAsDataURL(scope.fileinput);
      scope.showButtons = true;
    });

在HTML中：

<div ng-if="showButtons">
  <button>Remove Image</button>
  <button>Change Image</button>
</div>

Answer 2

您的服务应该返回upl，它会返回一个承诺。调用控制器的成功处理程序将设置一个$ scope变量来切换按钮的可见性。

.controller("upload", ['$scope', '$http', 'uploadService', function($scope, $http, uploadService) {
  $scope.$watch('file', function(newfile, oldfile) {
    if(angular.equals(newfile, oldfile) ){
      return;
    }
  });

  uploadService.upl().
  then(function(response) {
    $scope.showButtons = true;
  }, 
  function(err) {})

}]）

$scope.showButtons显示按钮

上传图片后添加按钮

2 个答案: