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

debugcn 发表于 Dev

杰西卡（Jessica）

我创建了一个带有“拖放”或“单击以上传”文件选项的表单。当这两种情况之一发生时，我希望它触发一个动作。

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>

吉卜赛人

编辑：

尝试正确实现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/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。