Question

我使用drag and drop script将文件输入字段转换为拖放区域。拖动图像后，它会在输入字段中插入。

我不希望它自动添加。我想在点击按钮.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

单击添加时，尝试使用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);

使用回调函数来阻止操作

3 个答案: