使用回调函数防止操作

Question

我使用一个拖放脚本，它将文件输入字段转换为拖放区域。只要拖动图像，它就会插入到输入字段中。

我不希望它自动添加。我想只在单击按钮.add之后将其添加到输入字段中。我无法弄清楚是否可以做到这一点，是否有可能以某种方式使用接受回调函数，并告诉它只添加，如果按钮被单击，否则从输入字段中删除拖动的文件?

<input type="file" name="photo" id="photo" accept="image/png, image/jpeg" />
$('#photo').ezdz({  
    accept: function() {
    }
});

Answer 1

您可以通过常规html:

禁用输入。

<input type="file" disabled />

，然后连接'add' BTN与一个事件，以启用或禁用文件输入，如果你使用jquery:

$("input").prop('disabled', false);

Answer 2

尝试在单击add时使用js将变量设置为true。然后在回调中检查该变量是否为真。如果没有，则从输入中删除该文件。

var add = false;
$('button#add').on('click', function(){
    add = true;
 }
$('#photo').ezdz({  
    accept: function() {
       if( add != true ) {
           // code to remove image from input 
        }
    }
});

Answer 3

这是不完美的，但它可能显示一个确认后，文件已被删除，然后删除它，如果他们选择像这样

https://jsfiddle.net/2t8yq0ac/1/

var $photo = $('#photo');
function photoChange(e) {
    var ok = confirm("Are you sure you want to add this file?");
    if(!ok) {
        $photo.replaceWith($photo = $photo.clone());
        $photo.on("change", photoChange);
    }
}
$photo.on("change", photoChange);