перетаскивайте несколько файлов - PullRequest
Новая
       2

перетаскивайте несколько файлов

0 голосов
/ 15 декабря 2018

Я хотел бы создать форму с функцией перетаскивания.Я вижу, что filelist - это объект только для чтения, и он не используется с перетаскиванием.Поэтому я копирую файл в массив и передаю его в форму с помощью 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);
    }

1 Ответ

0 голосов
/ 15 декабря 2018

Вы должны добавлять файлы к FormData по одному.Используемый синтаксис похож на то, что вы делаете в элементе ввода, и выглядит как массив.Поэтому добавьте ваши файлы так: 

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

Затем на стороне сервера они будут доступны в массиве files.

...