如何使用纯 JavaScript 上传文件和其他文本框数据答案

【问题标题】：How to upload file and other textbox data using plain javascript如何使用纯 JavaScript 上传文件和其他文本框数据
【发布时间】：2017-04-02 04:24:07
【问题描述】：

我想使用纯 javascript 上传图像和其他输入数据。我已经搜索了很多东西，但它与我想要的不同。所以我决定把它贴在这里。我想要的是与其他输入数据一起上传图像。

<form enctype="multipart/form-data" id="form">
      <input type="text" placeholder="Description" name="desc">
      <input type="file" name="file" id="image">
      <input type="submit" class="btn btn-primary">
</form>

var myform = document.getElementById('form');

    myform.addEventListener('submit', function(e){
        e.preventDefault();
        var fileInput = document.getElementById('image');
        var file = fileInput.files[0];

        var datas = new FormData(myform);
        var xhr = new XMLHttpRequest();
        var url = "sample.php";
            xhr.open('POST', url, true);
            xhr.setRequestHeader('Content-type', 'multipart/form-data');

        xhr.onreadystatechange = function(){
             if(xhr.readyState == 4 && xhr.status == 200){
                  var response = xhr.responseText;
                      console.log(response);
              }
        };

         xhr.send(datas);
    });

PHP

echo $_FILES['file']['name'];

输出

未定义的索引：文件

【问题讨论】：

标签： javascript php file file-upload

【解决方案1】：

您请求的内容类型必须是multipart/form-data，而不是application/x-www-form-urlencoded。

【讨论】：

缺少边界且仍未定义索引
我注意到你没有在你的xhr 上调用send 方法。示例中缺少该行还是您错过了该行？ xhr.send(datas);
我只是忘记发布发送但它实际上是我在做什么
您是否尝试过打印出 $_FILES 数组？ print_r($_FILES)。结果是什么？ desc 也没有收到吗？