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 event绑定到文件上传的cancel按钮，因为文件对话框的结果未公开给浏览器。所以我建议的是，写一个onchange event到文件上传元素，并检查，如果它的值是空的。如果是，则在销毁后重置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();
    });
  });

});

Answer 2

我意识到这篇文章已经选择了答案，但有一种更容易的方法可以检测用户是否取消了文件选择对话框窗口。

在onchange函数中，您可以使用FileReader构造函数和一个简单的if语句来捕获用户是否选择了文件。基本上，FileReader构造函数允许您的Web应用程序读取用户使用File或Blob对象选择的文件的内容。

您所要做的就是调用一个简单的if语句来检查FileReader是否可以读取上传的文件。在这种情况下，如果用户点击文件选择对话框窗口中的取消按钮，则无法读取该文件。

以下是如何实现此功能的示例。虽然下面的例子是在JS中，但它可以在jQuery函数中使用。

input.onchange = function() {
    var file = this.files[0];
    var reader = new FileReader();

    reader.readAsDataURL(file);

    if(reader) {
        // A FILE WAS SELECTED.
    } else {
        // THE USER CANCELLED THE FILE SELECTION.
    }
}

您可以阅读有关FileReader Constructor的更多信息，详细了解其功能和浏览器支持。

这是我能找到的最简单的解决方案。我希望它可以帮助其他人解决这个问题。

Answer 3

这会对你有所帮助

$( 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();
        });
    });
    
    $('.reset').on('click', function(){
       $('input').val('');
       $('.cr-viewport').html('');
       $('.cr-image').attr('src','');
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

<a class="reset">cancel</a>

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

3 个答案: