javascript - JS 中的拖放区域 - 文件输入

Question

我在以现有表单上传文件时遇到问题。 我正在寻找的是能够添加多个文件(最多 5 个)的脚本，并且您可以一次添加一到五个文件。如果你一一添加的话，我需要的是添加新的，而不是替换之前的。

我的表格看起来像这样:

Name
LastName
Email
Phone number
Interests
Files

文件名的创建方式如下:姓名+姓氏+电话号码+文件名

我使用每个文件的路径向数据库添加条目 - 这已完成，我只需要良好的拖放区域。

我需要它来显示添加的文件名并可以从队列中删除添加的文件。

但我不希望在添加文件时上传文件。我希望在提交整个表单时上传它，以便可以创建文件名并添加数据库路径。

任何人都可以为我提供好的脚本吗？或者根据我之前提到的两个主题的脚本使其可以执行我想要的操作？

我能够一一添加 5 个文件，我在这里进行了描述: HTML Add multiple file to the input

此外，我还可以立即添加更多我在这里描述的内容: https://stackoverflow.com/questions/30499388/dropzone-js-into-another-form

Answer 1

我认为这个例子对你有帮助。 此应用程序允许将文件拖放到灰色区域(1 或 5) 如果单击文件名，则会从列表中删除文件。

function init() {
    //get dragdrop element
    var dd = document.getElementById("dragdrop");
    //get files element
    $files = document.getElementById("files");
    dd.ondragover = stop;
    dd.ondragleave = stop;
    if ('FileReader' in window) {
        document.ondrop = dragAccept;
    }

    //get form
    var $form = document.querySelector("form");
    //catch on submit
    $form.onsubmit = function (e) {
        stop(e);
        var fd = new FormData();
        //apend files to FormData
        for (var i in files){
            var file = files[i].file;
            var filename = file.name;
            var name = "file";
            fd.append(name, file, filename);
        };
        //append inputs to FormData
        var $inputs = $form.querySelectorAll("input");
        for (var i = 0; i < $inputs.length; i++) {
            var $input = $inputs[i];
            fd.append($input.getAttribute("name"), $input.value);
        }
        //Send data
        var xhr = new XMLHttpRequest();
        xhr.open('POST', '/echo/html/', true);
        xhr.send(fd)
    }
}

function stop(e) {
    e.stopPropagation();
    e.preventDefault();
}

function dragAccept(e) {
    stop(e);
    if (e.dataTransfer.files.length > 0)
        for (var i = 0; i < e.dataTransfer.files.length; i++) {
            addFile(e.dataTransfer.files[i]);
        }
}

//file list store
var files = {};
// html element of file list
var $files = null;
//add file to file list
function addFile(file) {
    //add files with diferent name, max files count 5
    if (!(file.name in files) && Object.keys(files).length < 5) {
        var div = createFile(file.name);
        $files.appendChild(div);
        files[file.name] = {
            file: file,
            element: div
        }
    }
}

//create html element with file name
function createFile(name) {
    var div = document.createElement("div");
    div.innerText = name;
    var input = document.createElement("input")
    //remove on click
    div.addEventListener("click", function () {
        $files.removeChild(this);
        delete files[name];
    })
    return div;
}


window.addEventListener("load", init);

<form method="post" enctype="multipart/form-data" action="">
    <label>Name<input name="name" /></label>
    <label>Last name<input name="lastName" /></label>
    <label>Email<input name="email" /></label>
    <div id="dragdrop" style="width: 300px; height: 300px; background-color:lightgray">Drag drop zone</div>
    <div id="files"></div>
    <button type="submit">Send</button>
</form>