Javascript：如何在submit（）上上载文件？

我有一个带有

的JSP页面，可以在提交时上载文件。 但是，上传功能不会在路径/uploads处向服务器上传任何文件

HTML表单：

<form action="./index.jsp" onsubmit="uploadFile()">
        <input type="file" class="form-control-file " placeholder="Choose file" id="excelInput">
        <button type="submit" class="btn btn-primary">Run Profiling</button>
 </form>

<script>
  function uploadFile(){
      let excel = document.getElementById("excelInput").files[0];  // file from input
      alert(excel);
      let req = new XMLHttpRequest();
      let formData = new FormData();
        try{
              formData.append("excel", excel);                                
              req.open("POST", 'D:\\eclipse\\workspace\\Project2\\WebContent\\uploads');
              req.send(formData);
        }
        catch(e){ 
            alert(e);
        }
  }
  </script>

运行分析

上传文件的Javascript函数：

<form action="./index.jsp" onsubmit="uploadFile()">
        <input type="file" class="form-control-file " placeholder="Choose file" id="excelInput">
        <button type="submit" class="btn btn-primary">Run Profiling</button>
 </form>

<script>
  function uploadFile(){
      let excel = document.getElementById("excelInput").files[0];  // file from input
      alert(excel);
      let req = new XMLHttpRequest();
      let formData = new FormData();
        try{
              formData.append("excel", excel);                                
              req.open("POST", 'D:\\eclipse\\workspace\\Project2\\WebContent\\uploads');
              req.send(formData);
        }
        catch(e){ 
            alert(e);
        }
  }
  </script>

函数uploadFile（）{
让excel=document.getElementById（“excelInput”）.files[0]；//来自输入的文件
警报（excel）；
让req=newXMLHttpRequest（）；
设formData=new formData（）；
试一试{
formData.append（“excel”，excel）；
请求打开（“POST”，“D:\\eclipse\\workspace\\Project2\\WebContent\\uploads”）；
请求发送（formData）；
}
第（e）款{
警报（e）；
}
}

它不会进入

catch（）

部分。但它也没有上传。

---

有什么遗漏吗？

被骗者似乎很差，所以我发布了一个答案

您基本上想要添加eventListener并提交到WEB服务！不是文件位置

window.addEventListener（“加载”，函数（）{
document.getElementById（“uploadForm”）.addEventListener（“提交”，函数（e）{
e、 preventDefault（）；//停止提交
让excel=document.getElementById（“excelInput”）.files[0]；//来自输入的文件
让req=newXMLHttpRequest（）；
设formData=new formData（）；
试一试{
formData.append（“excel”，excel）；
req.open（“POST”，可以处理xmlhttprequests的进程的实际web地址”）；
请求发送（formData）；
}捕获（e）{
控制台日志（e）；
}
})
})

运行分析

也许吧！要将文件发送到服务器，必须将请求头设置为multipart。是的，根据@AndreaGiammarchi，您必须为事件设置预防，然后使用自己的函数

onsubmit=“uploadFile（event）”

，这样您就可以在

uploadFile

函数中设置

event.preventDefault（），但主要问题是，您试图将文件发布到文件系统
D:\\…
，但这不起作用。您需要将数据发布到可以处理post请求的服务器端端点。1）您需要防止默认的提交操作，例如
onsubmit=“uploadFile（）；return false”
。2） 您应该发布到实际的URL。您不能将

发布到本地directory@RajpalSingh最好不要为

多部分/表单数据

请求设置

内容类型

标题。当发布

FormData

实例时，它会自动发生