Javascript 如何在文件选择时提交表单而不重新加载页面？

我正在开发一个无线文件传输应用程序HTTP Web服务器，它包含一个带有表单的网站，可以将文件上传到服务器，即android应用程序

当我选择一个非常小的文件时，生成的标题如下

            POST /?Upload HTTP/1.1
            Host: 192.168.0.101:4567
            Connection: keep-alive
            Content-Length: 2968
            Pragma: no-cache
            Cache-Control: no-cache
            Origin: http://192.168.0.101:4567
            User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.87 Safari/537.36
            Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryT0t2jgS72DnsVZRX
            Accept: */*
            DNT: 1
            Referer: http://192.168.0.101:4567/
            Accept-Encoding: gzip, deflate
            Accept-Language: en-US,en;q=0.8

当我选择一个更大的文件时，会出现如下错误

控制台错误：索引：637拒绝设置不安全的标题内容长度

标题生成

            Provisional headers are shown
            Content-Type:multipart/form-data; boundary=----WebKitFormBoundary0tFAb8kt90pwbuFO
            Origin:http://192.168.0.101:4567
            Referer:http://192.168.0.101:4567/
            User-Agent:Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.87 Safari/537.36

            Provisional headers are shown
            Content-Type:multipart/form-data; boundary=----WebKitFormBoundary0tFAb8kt90pwbuFO
            Origin:http://192.168.0.101:4567
            Referer:http://192.168.0.101:4567/
            User-Agent:Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.87 Safari/537.36

            Provisional headers are shown
            Content-Type:multipart/form-data; boundary=----WebKitFormBoundary0tFAb8kt90pwbuFO
            Origin:http://192.168.0.101:4567
            Referer:http://192.168.0.101:4567/
            User-Agent:Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.87 Safari/537.36

代码：

            <form id="uploadForm" method="post" enctype="multipart/form-data">
                <input id="uploadPath" type="hidden" name="path">
                <button class="file-upload">
                    <input id="fileUpload" onchange="uploadFile()" type="file" class="file-input">Upload
                </button>
            </form>

            <script>

            function uploadFile() {        
                var form = document.getElementById('uploadForm');
                var path = form.elements.namedItem("path").value
                var file = document.getElementById('fileUpload').files[0];
                var formData = new FormData(form);

                formData.append('file', file);
                var http = new XMLHttpRequest();
                http.open("POST", '/?Upload', true);
                http.setRequestHeader("Content-length", file.size);
                http.onreadystatechange = function () { //Call a function when the state changes.
                    if (http.readyState == 4 && http.status == 200) {
                        alert(http.responseText);
                    }
                }

                http.send(formData);
                form.reset();
                form.elements.namedItem("path").value = path;

            }
            </script>

---

这将侦听文件输入，当值更改时，意味着他们已经选择了一个文件，它将使用您的表单向您指定的url发送一个ajax调用。这将在不重新加载页面的情况下提交表单

更新为包含对jQuery的引用

---

您可能应该尝试研究AJAX。通过从Web服务器请求页面片段，可以在不重新加载的情况下更新部分页面。然后使用页面片段更新页面上的某些元素。有关介绍，请参阅。

您可以查看此解决方案。需要JQuery，但易于实现

---

您可以尝试只使用Javascript和AJAX，而不需要依赖于JQuery。这将是一个更复杂的构建过程，但是如果您计划构建更复杂的表单提交功能，这是最好的方法。

因此，请结合您从这些帖子中获得的信息….？您能帮助我吗？我没有正确获取它。@AndySorry it upload.php，但它也不工作索引：628未捕获引用错误：$未定义。。这里是$fileUpload.onchange，函数{error如果您遇到错误，这意味着您的页面中没有包含jQuery。搜索jQuery入门这不是答案，而是注释。

<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
<script>
$(function () {
  $("#fileUpload").on("change", function () {
    $.ajax({
      url: "upload.php",
      method: "POST",
      data: $("form").serialize(),
      success: function (data) {
        // success callback
      }
    });
  });
});
</script>