javascript - 单击文件输入上的取消时图像不会变空？

Question

我正在使用 Croppie此裁剪图像功能的插件。当用户单击取消文件输入时，输入文本字段变为空并且图像不会变空。当用户单击文件输入上的取消按钮时，我也想删除图像。 DEMO

HTML

<form action="test-image.php" id="form" method="post">
  <input type="file" id="upload" value="Choose a file">
  <div id="upload-demo"></div>
  <input type="hidden" id="imagebase64" name="imagebase64">
  <a href="#" class="upload-result">Send</a>
</form>

JS

$(document).ready(function() {
  var $uploadCrop;

  function readFile(input) {
    if (input.files && input.files[0]) {
      var reader = new FileReader();
      reader.onload = function(e) {
        $uploadCrop.croppie('bind', {
          url: e.target.result
        });
        $('.upload-demo').addClass('ready');
      }
      reader.readAsDataURL(input.files[0]);
    }
  }
  $uploadCrop = $('#upload-demo').croppie({
    viewport: {
      width: 200,
      height: 200,
      type: 'circle'
    },
    boundary: {
      width: 300,
      height: 300
    }
  });
  $('#upload').on('change', function() {
    readFile(this);
  });
  $('.upload-result').on('click', function(ev) {
    $uploadCrop.croppie('result', {
      type: 'canvas',
      size: 'original'
    }).then(function(resp) {
      $('#imagebase64').val(resp);
      $('#form').submit();
    });
  });   
});

Answer 1

好吧，这可能是一个典型的场景，因为您不能将click 事件 绑定(bind)到文件上传的cancel 按钮，因为文件对话框的结果是不暴露给浏览器。所以我的建议是，将 onchange 事件 写入文件上传元素并检查它的值是否为空。如果是，则在销毁后重置 croppie 实例。这是更新后的代码和 working Fiddle .

HTML

<form action="test-image.php" id="form" method="post">
  <input type="file" id="upload" value="Choose a file" onchange="clearImage(this)" />
  <div id="upload-demo"></div>
  <input type="hidden" id="imagebase64" name="imagebase64">
  <a href="#" class="upload-result">Send</a>
</form>

JS

var $uploadCrop;
var opts = {
  viewport: {
    width: 200,
    height: 200,
    type: 'circle'
  },
  boundary: {
    width: 300,
    height: 300
  }
};

//change function.    
function clearImage(ctrl) {
  if ($(ctrl).val() == "") {
    $('#upload-demo').croppie('destroy');
    $uploadCrop=$('#upload-demo').croppie(opts);
  }
}

$(document).ready(function() {
  function readFile(input) {
    if (input.files && input.files[0]) {
      var reader = new FileReader();
      reader.onload = function(e) {
        $uploadCrop.croppie('bind', {
          url: e.target.result
        });
        $('.upload-demo').addClass('ready');
      }
      reader.readAsDataURL(input.files[0]);
    }
  }

  $uploadCrop = $('#upload-demo').croppie(opts);

  $('#upload').on('change', function() {
    readFile(this);
  });
  $('.upload-result').on('click', function(ev) {
    $uploadCrop.croppie('result', {
      type: 'canvas',
      size: 'original'
    }).then(function(resp) {
      $('#imagebase64').val(resp);
      $('#form').submit();
    });
  });

});