Question

我在现有表单中上传文件时遇到问题。我正在寻找的是可以添加多个文件（最多5个）的脚本，您可以一次添加一到五个文件。如果你逐个添加，我需要它添加新的，而不是替换前一个。

我的表格看起来像这样：

Name
LastName
Email
Phone number
Interests
Files

和文件名的创建方式如下：name+lastname+phonenumber+filename

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

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

但我不想在添加文件时上传文件。我希望它在我提交整个表单时上传，因此可以创建文件名并添加DB的路径。

有谁可以请我提供好的脚本，或者根据我之前提到的两个主题的脚本，让它可以做我想做的事情？

我能够逐个添加5个文件，我在这里描述了它： HTML Add multiple file to the input

此外，我能够在此处添加更多内容： https://stackoverflow.com/questions/30499388/dropzone-js-into-another-form

Answer 1

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

＆＃13;

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);

＆＃13;

<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>

＆＃13;

在JS中拖放区域 - 文件输入

1 个答案: