FormData.append () не работает с файлами - PullRequest
0 голосов
/ 14 января 2019

Я пытаюсь добавить объект File к объекту FormData в JavaScript, но он не работает, и добавляется только пустой объект. Если я пытаюсь добавить ключ / значение, он работает нормально.

В консоли нет сообщения об ошибке / предупреждения. Я активировал все каналы.

Я пробую примеры из Интернета и из MDN. Но ничего не помогает. Я не понимаю почему? Доступ к файлам заблокирован по соображениям безопасности?

Я использую Firefox 64.0 или Chrome 71.0. В настоящее время пример не содержит связи клиент-сервер. Но я попробовал это двумя способами: в качестве локального файла и страницы, загруженной с веб-сервера.

Основой для моего вопроса является то, что я хотел бы загрузить файлы с XmlHttpRequest в сценарии на сервер.

Консоль

File(234321) {name: "refresh2.gpx", lastModified: 1503041677210,
              lastModifiedDate: Fri Aug 18 2017 09:34:37 GMT+0200 (...),
              webkitRelativePath: "", size: 234321, …}

{"key":"value","userfile":{}}

HTML тело

<body>
<form id="file-form" action="handler.php" method="POST">
  <input type="file" id="file-select" />
  <button type="submit" id="upload-button">Upload</button>
</form>
</body>

Сценарий

<script>
document.getElementById('file-form').onsubmit = function(event) {
    event.preventDefault();

    // Get the selected files from the input.
    var files = document.getElementById('file-select').files;

    // Create a new FormData object.
    var formData = new FormData();
    console.log(files[0]);
    formData.append("key", "value");
    formData.append("userfile", files[0]);

    // dump formData object
    var object = {};
    formData.forEach(function(value, key){
        object[key] = value;
    });
    var json = JSON.stringify(object);
    console.log(json);

    // xmlhttprequest part comes here....
}
</script>
</html>

Спасибо за вашу помощь

CachingFoX

1 Ответ

0 голосов
/ 14 января 2019

Ваш FormData имеет файл, но он не отображается, потому что JSON.stringify будет регистрировать файл как пустой объект.

Пожалуйста, используйте это для регистрации всех ваших данных формы

for (var pair of formData.entries()) {
    console.log(pair[0]+ ', ' + pair[1]); 
}
...