Question

我在这里使用servlet的典型基于表单的上传文件功能 http://www.tutorialspoint.com/servlets/servlets-file-uploading.htm

客户端代码是

<html>
<head>
<title>File Uploading Form</title>
</head>
<body>
<h3>File Upload:</h3>
Select a file to upload: <br />
<form action="UploadServlet" method="post"
                        enctype="multipart/form-data">
<input type="file" name="file" size="50" />
<br />
<input type="submit" value="Upload File" />
</form>
</body>
</html>

问题是在服务器端，我将json输出写入响应对象（流）。在客户端，它正在进行重定向。基本上，重定向到只显示json输出的页面。

在客户端，我如何控制响应？我想解析JSON并用它做一些事情，但我无法找到＆＃34;钩子＆＃34;或如何获得输出。我在客户端使用Javascript和HTML（尽可能使用AJAX）

谢谢

Answer 1

ajax功能

//url,callback,type,FormData,uploadFunc,downloadFunc
function ajax(a,b,e,d,f,g,c){
 c=new XMLHttpRequest;
 !f||(c.upload.onprogress=f);
 !g||(c.onprogress=g);
 c.onload=b;
 c.open(e||'get',a);
 c.send(d||null)
}

https://stackoverflow.com/a/18309057/2450730 适用于所有最新的浏览器，包括移动设备。

就绪功能

function rdy(){
 console.log(this.response)// or JSON.parse(this.response) if json
}

<强>进度

function progressup(e){
 console.log(e.loaded/e.total)// or (e.loaded/e.total*100|0)+'%' to get the percent
}

设置表单

假设您的表单是第一个，您只需阻止它的默认行为并创建一个自定义函数，在这种情况下是ajax来发送表单。

window.onload=function(){
 document.forms[0].onsubmit=function(e){
  e.preventDefault();
  ajax('upload.php',rdy,'post',new FormData(this),progressup)
 }
}

这就是你所需要的，因为你可以看到代码很短......但它拥有你需要的一切。

注意：每种类型的表单都被接受...所以你不必费心去编写额外的代码来阅读表单值...这要感谢使用new FormData()

修改

此外，表单本身并不需要所有这些额外的属性。

这足够......（没有方法，动作，enctype）

<form><input type="file" name="file"><input type="submit" value="GO"></form>

或者在您的文件输入中添加多个以上传多个文件。

<input type="file" name="file" multiple>

如果您有任何问题，请询问

在文件上载请求之后获取客户端上的响应

1 个答案: