Question

我尝试在JavaScript中将File对象追加到FormData对象，但是它不起作用，仅添加了一个空对象。如果我尝试附加键/值，则效果很好。

控制台中没有错误/警告消息。我激活了所有频道。

我从网络和MDN尝试示例。但是没有任何帮助。我不明白为什么？是否出于安全原因阻止了文件访问？

我正在使用Firefox 64.0或Chrome 71.0。当前，该示例不包含任何客户端-服务器通信。但是我以两种方式尝试过：作为本地文件和从Web服务器加载的页面。

我的问题的背景是，我想使用脚本中的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

Answer 1

您的FormData有文件，但未显示，因为JSON.stringify会将文件记录为空obj。

请使用它来记录您所有的表单数据

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

FormData.append（）不适用于文件

1 个答案: