Question

如果我从多输入字段的输入类型文件中选择文件，我想将文件移到放置区域。

我有像这样的dropzone代码：

var target = document.getElementById('dropArea');

target.addEventListener("dragover", function(event) {
    event.preventDefault();
}, false);

target.addEventListener("drop", function(event) {
    event.preventDefault();
    files = event.dataTransfer.files, numFiles = files.length;
    var i = 0;
    for (; i < numFiles; i++) {
        var uploadForm = new FormData();
        var fType = (files[i].type);
        if (fType == 'image/jpeg' || fType == 'image/gif' || 
            fType == 'image/jpeg' || fType == 'image/jpg' || 
            fType == 'image/png' || fType == 'image/bmp') {

            uploadForm.append("theFile", files[i]);
            uploadForm.append("fileName", files[i].name);
            var xhr = new XMLHttpRequest();
            xhr.addEventListener("load", transferComplete, true);

            function transferComplete(event) {
                $('.alert-info').hide();
                $('.alert-success').fadeIn().delay(2000).fadeOut('slow');
            }

            $('.alert-info').fadeIn();
            xhr.open("post", "com/processupload.cfc?method=uploaddata", true);
            xhr.send(uploadForm);
        } else {
            $('.alert-error').fadeIn().delay(2000).fadeOut('slow');
        }
    }
}, false);

我还有另一个输入字段，称为<input type="file" name="browse" multiple" id='files">

我希望当我使用此按钮上传时，它应立即将所有文件移到放置区，并在收到项目时立即触发。

我该怎么做？

Answer 1

选择/更改文件时，您需要输入new_record['Line'] = pd.to_numeric(new_record['Line'], errors='coerce')来触发#files的放置侦听器。为此，您需要做两件事：

首先，将#dropArea属性添加到onChange输入中，它将执行在下一步中创建的功能：

#files

第二，创建函数，使其可用于<input type="file" name="browse" multiple" id="files" onChange="triggerDrop()">：

onChange

function triggerDrop() { var dropEvent = new Event('drop'); target.dispatchEvent(dropEvent); }中的两行仅创建一个放置事件（因为这是您想在其他输入上触发的事件）并手动执行它。这将运行您在triggerDrop的drop事件监听器中编写的代码。

尝试将使用输入类型文件上传的文件移动到div

1 个答案: