javascript - 关于简单拖放 Div 区域的警报

Question

如图所示，当文件被拖动到虚线区域时，我需要一个非常简单的警报，我已经尝试过插件，但这些不符合我的要求。

这是我的 HTML:

<form  id="uploadStudentsForm"  class="js-upload-form">
<input type="hidden" name="action" value="uploadStudents"/>
<div class="upload-drop-zone" id="drop-zone">
    <div class="upload-wrapper"  id="csvFileDiv">
        <p>Upload Files</p>
        <input type="file" name="files[]" class="inputfile " id="js-upload-files" multiple aria-label="hidden">  
        <label for="csvFile">drag & drop or click here to add csv file </label>
    </div>
</div>
</form>

我想要简单的js，例如当文件拖放到该div(upload-drop-zone)中时显示alert("file Drop")

我不知道该使用哪一个，尝试过这些:

1. 可排序
2. 拖龙

Answer 1

您可以在拖放区域中使用 ondrop 事件处理程序，如下所示。添加 ondragover 来覆盖浏览器的默认拖动行为。

<div class="upload-drop-zone" id="drop-zone" ondrop="drop(event)" ondragover="dragover(event)" >
    <div class="upload-wrapper"  id="csvFileDiv">
        <p>Upload Files</p>
        <input type="file" name="files[]" class="inputfile " id="js-upload-files" multiple aria-label="hidden">  
        <label for="csvFile">drag & drop or click here to add csv file </label>
    </div>
</div>

函数应该如下所示

function drop(event){
 event.preventDefault();

 alert("file dropped");
}

function dragover(event){
 event.preventDefault();

}

示例工作 fiddle :https://jsfiddle.net/4ZYq3/186/

在此处查看此链接

https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop