Question

我想创建具有拖放功能的表单。我看到文件列表是一个只读对象，它是一个对象，并且不与拖放一起使用。因此，我将文件复制到数组中，然后将其与formdata一起传递给表单。但这行不通。有什么想法吗？

html：

<form id="upload" action="action.php" method="POST" enctype="multipart/form-data">

<fieldset>
<legend>HTML File Upload</legend>

<input type="hidden" id="MAX_FILE_SIZE" name="MAX_FILE_SIZE" value="300000" />

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

减少javascript：

var myfiles = [];
(function() {

    // getElementById
    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','action.php');
        formData.append("files", myfiles);
        xhr.onload = function () {

            console.log(this.responseText);
        };
        xhr.send(formData);
    }

Answer 1

您必须一次将一个文件追加到FormData。所使用的语法类似于您在输入元素中执行的语法，并且看起来像一个数组。因此，像这样附加文件：

myfiles.forEach(file=>{
  formData.append("files[]", file);
});

然后，在服务器端，它们将在files数组中可用。

拖放发布多个文件

1 个答案: