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

时间:2012-04-06 19:17:59

标签: ajax spring-mvc file-upload javascript

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

有人可以建议我可以完成工作的解决方案或示例代码吗?我是JavaScript的新手。

还有一件事是我必须回到服务器端处理上传文件后返回到同一页面并从服务器端返回同一页面的字符串。所有这一切都没有刷新当前页面

任何建议都将受到高度赞赏。

2 个答案:

答案 0 :(得分: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);

答案 1 :(得分:0)

我苦苦挣扎了很多天,最后我想出了一个可能不是最佳解决方案的解决方案,但我在这里发帖,以便像我这样的人可以从中得到帮助..

满足我的所有要求

我从jsp页面打开了一个jsp页面作为弹出窗口,从那个页面我登陆我的控制器并完成了我在服务器端的工作,并根据上传到同一弹出页面的文件内容返回了一个字符串从弹出窗口我将该字符串传输到我的父页面。

因此我的工作没有刷新页面就完成了...... 这样做的步骤 1.打开一个弹出窗口

  

window.open('// url of jsp page to open','// somename','// property of popup page');

从弹出窗口中控制器上的2.land并返回到jsp页面中带有我想要的字符串的同一个jsp页面。 3.将该字符串传递给父页面,如下所示。

  

window.open.urparentjspfuntion(valuefromcontroller);

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

我希望这个解决方案对我这样的人有帮助......