Question

我的代码所做的是提示＆＃34;浏览＆＃34;窗口，所以我们可以选择一个文件。启动“浏览”窗口没有任何问题。问题是在我选择文件后，它不会调用$ scope.manageFileSelect。我之所以这样编码，是因为我不想使用标准的浏览按钮。我甚至在fileInput上发送了一个单击来欺骗它。例如，我点击文件cover.jpg，然后点击确定按钮，它不会显示＆＃34;我被叫了吗？叹！ :(＆＃34;在控制台上。但是，如果我再次选择cover.jpg，它会起作用。这很奇怪。

这是我的代码：

 $scope.manageFileSelect = function(evt) {
  console.log('Did I get called? Sigh! :(');
  var file = evt.currentTarget.files[0];
  $scope.selectedFilename = file.name;
  var reader = new FileReader();
  reader.onload = function (evt) {
    $scope.$apply(function($scope) {
      $scope.myImage = evt.target.result;
      $timeout($scope.openImageToThumbnail, 1500);
    });
  };
  reader.readAsDataURL(file);
};

$scope.button = document.getElementById('fileInput');
$scope.button.addEventListener('click', function() {
  console.log('creating listener for manageFileSelect');
  $scope.input = document.createElement('input');
  $scope.input.type = 'file';
  $scope.input.addEventListener('change', $scope.manageFileSelect);
  $scope.input.click();
  console.log('input clicked');
});

Answer 1

当我必须使用完全自定义按钮选择javascript变量中的文件和存储时，这是我的方式：（参见我做的修复以选择相同的文件）

http://jsfiddle.net/rh63dd9w/

首先你有输入元素：

<button click-target="#inputFile">Select File</button>
<input type="file" fileread="file" id="inputFile" />

指令fileread（source）：

myApp.directive("fileread", [function () {
    return {
        scope: {
            fileread: "="
        },
        link: function (scope, element, attributes) {
            element.bind("change", function (changeEvent) {
                var reader = new FileReader();
                reader.onload = function (loadEvent) {
                    scope.$apply(function () {
                        scope.fileread = loadEvent.target.result;
                    });
                }
                reader.readAsDataURL(changeEvent.target.files[0]);
                // Thanks to this you can select the same file
                element.val('');
            });
        }
    }
}]);

点击目标指令：

myApp.directive('clickTarget', function () {
    return {
        restrict: 'A',
        scope: {
            target: '@clickTarget'
        },
        link: function (scope, elem, attr) {
            var input = $(scope.target);
            elem.on('click', function () {
                $(input).click();
            });
        }
    };
});

和css：

#inputFile {
    /* dont use display none because input.click() doesn't work in hiddens elements on some explorers */
    position: absolute;
    left: -300px;
}

AddEventListener在AngularJS中是间歇性的

1 个答案: