Question

我正在使用jQuery croppie插件来处理我正在处理并遇到问题的应用程序。我使用上传功能允许用户上传要裁剪的图片。如果用户选择了他们不满意的图像，我想要一种方法让他们删除图像并选择一个新图像。

虽然看起来没有一种简单的方法可以做到这一点。 croppie文档非常有限，我只能找到2种可能的解决方案。我无法开展这两项工作：

调用destroy()函数 - 遗憾的是，这会删除croppie添加的所有标记以使脚本正常工作。一旦它被销毁，我就没有办法重新初始化它。
使用内置的bind函数将url属性设置为空值 - 这是croppie github页面上的建议。它确实删除了图像，但它不允许用户选择新图像。用户可以单击上传框并选择图像文件，但是一旦他们点击打开，图像就不会被放入裁剪区域。看起来脚本停止在readFile函数上工作，但不会抛出任何控制台错误。

这是我现在使用的脚本，它允许您选择图像，删除图像，但它不会让您选择新图像：

https://jsfiddle.net/austin350s10/y7yby06b/

如果有人知道如何让我按照我的预期方式工作，我将不胜感激！

Answer 1

正如您在自己的回答中所建议的那样，您需要的是重置函数代码中的这一行$('#upload').val('');。

$(".reset").click(function () {
    $('.upload-demo').removeClass('ready');
    $('#upload').val(''); // this will clear the input val.
    $uploadCrop.croppie('bind', {
        url : ''
    }).then(function () {
        console.log('reset complete');
    });
});

之后，您可以再次上传相同的图片。

Answer 2

我原来的帖子中的解决方案编号2工作得很好。问题是我试图在删除后选择相同的图像。由于文件输入仍然具有对原始图像的引用，因此输入更改事件从未触发。一旦我选择了不同的图像，一切正常。

Answer 3

您的代码帮助了我。非常感谢你。

https://jsfiddle.net/y7yby06b/8/

$(".reset").click(function() {
    $('.upload-demo').removeClass('ready');
    $("#upload-demo").html("");
    $uploadCrop=null;

    $uploadCrop = $('#upload-demo').croppie({
        viewport: {
            width: 146,
            height: 146,
            type: 'square'
        },
        boundary: {
            width: 300,
            height: 300
        },
    });
});

此外：

 $(".reset").trigger("click");

重置croppie - 一个jQuery图像裁剪插件

3 个答案: