找到你要的答案

Q:onChange event not firing in a specific circumstance

Q:OnChange事件不开火在特定情境下的

I'm using a module to convert uploaded files into base64 (https://github.com/adonespitogo/angular-base64-upload).

Basically I'm making it perform filetype and size validations prior to the base64 encoding. It's working perfectly except for a very specific situation. When I upload a file and it does not validade (maximum size exceeded for example) it gives me a response (in the following plnkr it will be an alert for easy tracking). If I try to upload the exact same file again, it just doesn't fire the event. It doesn't get uploaded, but I don't get a response either.

.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...
    }
  }
};

I have been trying to figure out why, and since it is triggered by a change in the 'elem', I tried to manually change it before the cicle ends, so if I try to upload the same file, the elem is different, and thus, changed. I haven't had any success doing it, as apparently I can't edit it directly. I tried using $compile and .replaceWith() along with dozens of other attempts, without success.

Here's a working plnkr.

(Notice that the input[button] keeps the name of the file. I believe the root of the problem is on how the HTML handles the file input... But in the end I don't mind about the the visual part because I'm styling the button, so that name will not appear)

我用一个模块将上传文件到base64(https://GitHub。COM / adonespitogo / angular-base64-upload)。

Basically I'm making it perform filetype and size validations prior to the base64 encoding. It's working perfectly except for a very specific situation. When I upload a file and it does not validade (maximum size exceeded for example) it gives me a response (in the following plnkr it will be an alert for easy tracking). If I try to upload the exact same file again, it just doesn't fire the event. It doesn't get uploaded, but I don't get a response either.

.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...
    }
  }
};

I have been trying to figure out why, and since it is triggered by a change in the 'elem', I tried to manually change it before the cicle ends, so if I try to upload the same file, the elem is different, and thus, changed. I haven't had any success doing it, as apparently I can't edit it directly. I tried using $compile and .replaceWith() along with dozens of other attempts, without success.

这里的工作plnkr。

(注意输入[按钮]保存文件的名称。我认为最根本的问题是如何处理的HTML文件输入…但最后我不介意的视觉部分,因为我造型按钮,这样的名字将不会出现)

answer1: 回答1:

Ok, so I kept searching and eventually found out a way to clear it, using the input id.

On the abort function just added a cleaning routine right before it exits the application:

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

Here's the updated plnkr.

This will allow the cleaning of the input by id. The only issue is that you HAVE to have an id on the html element (which should always be there anyway), but you don't have to worry with it's name, as it will figure it out by the elem attributes. Is there a cleaner way to perform this?

好的,所以我继续搜索,最终找到了一个方法来清除它,使用输入ID。

在中止函数刚刚在它退出应用程序之前添加了一个清理例程:

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

这里的更新plnkr。

This will allow the cleaning of the input by id. The only issue is that you HAVE to have an id on the html element (which should always be there anyway), but you don't have to worry with it's name, as it will figure it out by the elem attributes. Is there a cleaner way to perform this?

javascript  angularjs