提醒简单的拖放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 dropped")

我不知道使用哪一个试过这些：

1. sortable
2. draggale

Answer 1

您可以使用jquery更改功能。

    $(document).on('change', "#js-upload-files", function(){
      alert('file dropped');
    });

Answer 2

您可以使用放置区中的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();

}

示例工作小提琴：https://jsfiddle.net/4ZYq3/186/

点击此链接

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