Question

我使用模块将上传的文件转换为base64（https://github.com/adonespitogo/angular-base64-upload）。

基本上我会让它在base64编码之前执行文件类型和大小验证。除了非常具体的情况外，它的工作正常。当我上传文件并且它没有验证时（例如，超出最大尺寸），它会给我一个响应（在下面的plnkr中，它将是一个易于跟踪的警报）。如果我尝试再次上传完全相同的文件，它就不会触发该事件。它没有上传，但我也没有收到回复。

.directive('baseSixtyFourInput', ['$window', function ($window) {
return {
  restrict: 'A',
  require: 'ngModel',
  scope: {
    maxSize: '=baseSixtyFourMaxSize',
    acceptedFormats: '=baseSixtyFourAcceptedFormats'
  },
  link: function (scope, elem, attrs, ngModel) {
    var fileObject = {};

    var abort = function (message) {
      alert(message);
      return false;
    };

    scope.readerOnload = function (e) {
      blah, blah...
    };

    var reader = new FileReader();
    reader.onload = scope.readerOnload;

    //THIS EVENT DOES NOT GET FIRED
    elem.on('change', function () {
      if (!elem[0].files.length) {
        return;
      }

      var file = elem[0].files[0];

      (validations here)

      fileObject.filetype = file.type;
      fileObject.filename = file.name;
      fileObject.filesize = file.size;
      reader.readAsArrayBuffer(file);
    });

    function _arrayBufferToBase64(buffer) {
      blah blah...
    }
  }
};

我一直在试图找出原因，并且由于它是由'elem＆＃39;中的更改触发的，我试图在cicle结束之前手动更改它，所以如果我尝试上传相同的文件，元素是不同的，因此，改变了。我没有成功做到这一点，因为显然我无法直接编辑它。我尝试使用$ compile和.replaceWith（）以及其他几十次尝试，但没有成功。

这里是working plnkr。

（注意输入[button]保留文件的名称。我相信问题的根源在于HTML如何处理文件输入......但最后我不介意视觉部分，因为我设置了按钮的样式，因此名称不会出现）

Answer 1

好的，所以我一直在搜索并最终找到一种方法来清除它，使用输入ID。

在中止功能上，只需在退出应用程序之前添加一个清洁例程：

var abort = function (message) {
  alert(message);
  document.getElementById(elem[0].attributes[1].value).value = '';
  return false;
};

这里是updated plnkr。

这将允许通过id清除输入。唯一的问题是你必须在html元素上有一个id（无论如何应该总是在那里），但是你不必担心它的名字，因为它会在elem属性。有更清洁的方法来执行此操作吗？

onChange事件在特定情况下不触发

1 个答案: