Question

我尝试通过拖放操作在表单中附加多个文件。我想将表单提交到相同的php文件。发送表单时，带有附加值的$ _Post和$ _files变量始终为空。只有原始形式的参数。有任何想法吗？

Index.php：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HTML5 File Drag &amp; Drop API</title>
<link rel="stylesheet" type="text/css" media="all" href="styles.css" />
</head>
<body>
<table>
<?php 
    var_dump($_POST);
    var_dump($_FILES);
}
?>
</table>
    <form action="index.php" id="upload" method="POST" enctype="multipart/form-data">

    <fieldset>
    <legend>Form</legend>

    <div>
        <label for="fileselect">Files to upload:</label>
        <input type="file" id="fileselect" name="fileselect[]" multiple="multiple" />
        <div id="filedrag">or drop files here</div>
    </div>

    </fieldset>

    </form>

    <button id="submitbutton" >Upload Files</button>    

    <div id="messages">
    <p>Status Messages</p>
    </div>

<script src="filedrag.js"></script>
</body>
</html>

减少filedrag.js：

    function $id(id) {
        return document.getElementById(id);
    }

    // file selection
    function FileSelectHandler(e) {

        // cancel event and hover styling
        FileDragHover(e);

        // fetch FileList object
        var files = e.target.files || e.dataTransfer.files;

        // process all File objects
        for (var i = 0, f; f = files[i]; i++) {
            myfiles.push(f);
            ParseFile(f);
        }

    }

    $id("submitbutton").onclick = function(){
        var xhr = new XMLHttpRequest();
        formData = new FormData(document.querySelector('form'));
        xhr.open('get','index.php');
        myfiles.forEach(file=>{
            formData.append("files[]", file);
        });
        formData.append("test", "test");
        xhr.send(formData);
    }

Javascript附加带有多个文件的表单

0 个答案: