表单 onchange 事件在 drop 'n drop 时不调用

Question

我创建了一个表单，可以选择“拖放”或“点击上传”文件。当这两种情况中的任何一种发生时，我希望它触发一个动作。

我使用onchange 事件在表单中的值更改时触发操作。

$("#uploadform").on('change', function (e) {
    e.preventDefault();

    alert("Something Changed");
});

只有在我“点击上传”文件时才会触发。当我“拖放”一个文件时，该事件不会被触发。

当我发生“点击上传”或“拖放”时如何触发相同的事件？

请在 JQuery 中发布答案。

JSFiddle

$(document).ready(function () {
    "use strict";
    $("#uploadform").on('change', function (e) {
        e.preventDefault();

        alert("Something Changed");
    });

    $('#browseFileDiv').click(function (e) {
        $(this).find('input[type="file"]').click();
    });
    $('#browseFileDiv input').click(function (e) {
        e.stopPropagation();
    });



    // Setup Drag 'n Drop

    function handleFileSelect(evt) {
        evt.stopPropagation();
        evt.preventDefault();
    }

    function handleDragOver(evt) {
        evt.stopPropagation();
        evt.preventDefault();
        evt.dataTransfer.dropEffect = 'copy';
    }

    var dropZone = document.getElementById('browseFileDiv');
    dropZone.addEventListener('dragover', handleDragOver, false);
    dropZone.addEventListener('drop', handleFileSelect, false);
});

#browseFileDiv {
    height: 100px;
    width: 200px;
    background-color: greenyellow;
}
#browseFileDiv > input {
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="upload.php" enctype="multipart/form-data" method="POST" id="uploadform">
    <div id="browseFileDiv">
        <input id="openFile" name="img" type="file" />
    </div>
</form>

Answer 1

编辑：

尝试正确实现change 和drop 监听器。

$("#uploadform").on('change drop', function (e) {
    e.preventDefault();
    e.stopPropagation();

    alert("Something Changed");
});

// No longer need for `drop` event listener on the `dropZone` element.
// In particular DO NOT stop propagation, otherwise the form will not receive it.

更新的演示：http://jsfiddle.net/jytL8heo/2/

---

一种解决方法是在放置时手动触发"change" 事件。

function handleFileSelect(evt) {
    // Manually fire the change event.
    $("#uploadform").trigger("change");

    evt.stopPropagation();
    evt.preventDefault();
}

演示：http://jsfiddle.net/jytL8heo/1/