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

I'm using the jQuery croppie plugin for for an application I'm working on and running into a problem. I'm using the upload feature to allow the user to upload an image to be cropped. Just in case the user selects an image they are not happy with, I want a way for them to remove the image and select a new one.

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

It does not seem like there is a easy way to do this though. The croppie documentation is very limited and I can only find 2 possible solutions. Both of which I can not get to work:

然而，似乎没有一种简单的方法可以做到这一点。croppie文档非常有限，我只能找到两种可能的解决方案。这两种情况我都无法工作:

Call the destroy() function - unfortunately this removes all the markup that croppie adds to make the script work. Once it is destroyed I do not see a way to reinitialize it.

调用destroy()函数——不幸的是，这将删除croppie添加到脚本工作的所有标记。一旦它被销毁，我就没有办法重新初始化它。
Use the built in bind function to set the url attribute to a empty value - this was a suggestion on the croppie github page. It does remove the image however it does not allow the user to select a new image. The user can click the upload box and pick a image file but as soon as they click open the image is not placed into the cropping area. It seems like the script stops working on the readFile function, but is not throwing any console errors.

使用内置的bind函数将url属性设置为空值——这是在croppie github页面上的一个建议。它确实删除了图像，但是它不允许用户选择新的图像。用户可以点击上传框并选择一个图像文件，但一旦点击打开，图像就不会被放置到裁剪区域。看起来脚本停止了对readFile函数的处理，但并没有抛出任何控制台错误。

Here's the script I'm using right now, which allows you to select an image, remove the image, but it won't let you select a new image:

这是我现在使用的脚本，它允许你选择一个图像，移除图像，但它不会让你选择一个新的图像:

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

If anyone has an idea how to get this to work in the way I intended I would be grateful!

如果有人知道如何让这个工作按照我的计划进行，我将不胜感激!

3 个解决方案

#1

So as you suggested in your own answer all you need is this line $('#upload').val(''); in your code in reset function.

因此，正如您在自己的回答中所建议的，您所需要的是这一行$('#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');
    });
});

After that you can upload same image again.

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

#2

The solution number 2 from my original post was working just fine. The problem was I was trying to select the same image after removing it. Since the file input still had the reference to the original image the input change event was never firing. As soon as I select a different image everything works fine.

我原来的帖子的第2号解决方案刚刚好。问题是，我试图在移除它之后选择相同的图像。由于文件输入仍然具有对原始图像的引用，所以输入更改事件不会被触发。只要我选择了不同的图像，一切都没问题。

#3

Your code helped me. Thank you very much.

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

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

Furthermore:

此外:

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

#1