Javascript 在文件输入中单击“取消”时图像是否不为空？

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

HTML

这对你有帮助

$（文档）.ready（函数（）{
var$上传作物；
函数读取文件（输入）{
if（input.files&&input.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
$UPLOADCROPE.CROPIE（'bind'）{
url:e.target.result
});
$（'.upload demo'）.addClass（'ready'）；
}           
reader.readAsDataURL（input.files[0]）；
}
}
$uploadCrop=$（“#上传演示”）.CROPIE({
视口：{
宽度：200，
身高：200，
类型：“圆圈”
},
边界：{
宽度：300，
身高：300
}
});
$（'#upload'）。on（'change'，function（）{readFile（this）；}）；
$（'.upload result'）。在（'click'，函数（ev）上{
$uploadCrop.CROPIE（'result'{
键入：“画布”，
尺码：“原版”
}).然后（功能（resp）{
$（'#imagebase64'）.val（resp）；
$（'表格'）.submit（）；
});
});
$（'.reset'）。在（'click'，function（）上{
$（'input'）.val（''）；
$（'.cr viewport'）.html（''）；
$（'.cr image'）.attr（'src'，''）；
});
});

取消
嗯，这可能是一种典型的情况，因为您无法将文件上载的
单击事件
绑定到
取消
按钮，因为文件对话框的结果不会向浏览器公开。因此，我建议编写一个
onchange事件
到file upload元素，并检查的值是否为空。如果是，则在销毁后重置
cropie
实例。以下是更新的代码和

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>

我知道这篇文章已经选择了一个答案，但是有一种更容易的方法来检测用户是否取消了文件选择对话框窗口

在
onchange
函数中，您可以使用带有简单if语句的
FileReader
构造函数来捕获用户是否选择了文件。基本上，
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.
    }
}

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

这是我能找到的解决这个问题的最简单的办法。我希望它能帮助其他有这个问题的人。
这不是答案。检查演示链接，当用户单击文件输入时，我想取消。一旦用户上传，则输入字段应变为取消按钮右侧检查@Guruprasad答案。完美@Guruprasad您的解释让我了解了更多这方面的知识。再次感谢：）随时。。快乐编码…）我支持这个答案，通过这种方式，您可以在不使用ajax的情况下将base64映像提交到服务器端。谢谢@Matthew，我下次会检查它。该项目已提交。：）
<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>

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();
    });
  });

});

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