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

Posted 2023-05-08

【中文标题】表单 onchange 事件在 drop \'n drop 时不调用

【英文标题】：Form onchange event not calling when drop 'n drop表单 onchange 事件在 drop 'n drop 时不调用

【发布时间】：2016-02-18 08:47:06

【问题描述】：

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

我使用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>

【问题讨论】：

如果长度> 0，您可以尝试获取更改的值运行代码您尝试过吗？

我不明白。你是说我应该删除 onchange 事件，而是做if length > 0？

no inside on change 事件执行 if 条件

但是如果我拖拽的时候它根本不运行，为什么还要加上if语句运行呢？

您的点击触发了输入，但您的更改有很大的不同

【参考方案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/

【讨论】：

我猜是因为 1) 你停止了事件传播，所以表单将不会接收它，并且 2) 拖放会创建一个 drop 事件，而不是 change。让我们尝试正确地做，我将编辑答案和演示。

感谢编辑！我访问“点击上传”文件的方式是这样的：new FormData($(this)[0]);。出于某种原因，它不适用于“拖放”。我做错什么了吗？

确实，drop 事件以不同方式存储关联文件。这个问题的第一个答案应该让你开始：***.com/questions/10261989/…