ajax - 上传本地文件内容而不刷新页面

Question

我的网络流中有一个页面，我想在不刷新页面的情况下上传文件。我尝试为此使用 Ajax 调用，但失败了。我不知道如何将上传文件中的数据发送到服务器端/后端进行进一步处理。我正在使用 Spring MVC 框架，我不想使用 PHP。

谁能建议我可以完成工作的解决方案或一些示例代码？我对 JavaScript 很陌生。

还有一件事是我必须在去服务器端处理上传的文件后返回同一页面并从服务器端返回带有字符串的同一页面。这一切都发生在不刷新当前页面的情况下

任何建议将不胜感激。

Answer 1

假设您已经构建了表单并设置了服务器端控制器来处理上传，这个小片段应该让您走上 AJAX-y 无刷新文件上传荣耀之路！

//create a new FormData reference
//(note: you could use getElementById or querySelector)
var myForm = document.forms.myUploadForm; 
var fd = new FormData(myForm);

//create and open an XHR
var xhr = new XMLHttpRequest();
xhr.open("POST","http://www.example.url/the/path/to/your/upload/controller");

//set up event listeners (optional)
xhr.onreadystatechange = monitorStatusFunction;
xhr.onprogress = updateProgressBarFunction;

//send the form (w/ no page refresh!)
xhr.send(fd);

Answer 2

我挣扎了很多天，最后我想出了一个可能不是最佳解决方案的解决方案，但我将其发布在这里，以便像我这样的任何人都可以从中获得帮助..

满足我所有的要求

我从我的 jsp 页面打开了一个 jsp 页面作为弹出窗口，从该页面我登陆我的控制器并在服务器端完成我的工作并返回一个字符串，具体取决于上传到同一弹出页面的文件的内容和从弹出我将该字符串转移到我的父页面。

因此，我的工作在没有刷新页面的情况下完成......执行此操作的步骤 1.打开一个弹出窗口，如下所示

window.open('//要打开的jsp页面的url','//somename','//弹出页面的属性');

2.从弹出窗口登陆你的控制器并返回到同一个jsp页面，其中包含我想要的jsp页面中的字符串。3.将该字符串传递给父页面，如下所示。

window.open.urparentjspfuntion(valuefromcontroller);

4.在父页面中定义一个功能来做你想做的事.....

我希望这个解决方案可以帮助像我这样的人......