gpt4 book ai didi

javascript - 文件上传后 AJAX 不重定向到网页 - POST 方法

转载 作者:行者123 更新时间:2023-12-02 03:37:09 25 4
gpt4 key购买 nike

我目前正在尝试开发一个针对 Google Chrome(4 及更高版本)优化的 Java Web 应用程序。

我希望用户能够选择多个文件,将它们上传到服务器(使用名为 uploadForm 的网页中显示的表单),并在上传完成后自动重定向到另一个网页(称为 upload) 。

因此,我创建了一个 JSP 文件 (uploadForm.jsp),其中定义了上传表单。我还使用 XMLHttpRequest 对象实现了文件上传过程(它是软件规范的一部分。我别无选择)

<body>
<form id="file_form" action="upload" method="post" enctype="multipart/form-data">
<input type="file" name="file_input[]" id="file_select" multiple webkitdirectory=""/>
<button type="submit" id="upload_button" >Upload</button>
</form>
</body>

<script type="text/javascript">

// Get the form
var form = document.getElementById("file_form");

// Get the file selecter
var fileSelect = document.getElementById("file_select");

// Get the button which allows to upload the documents
var uploadButton = document.getElementById("upload_button");

// Set up the request
var xhr = new XMLHttpRequest();

// Create a new FormData object
var formData = new FormData();

form.onsubmit = function(event){

// Prevent the form to be submitted. We want to write our
// own submission protocol
event.preventDefault();

// Update the button status during the uploading
uploadButton.innerHTML = 'Uploading...';

// Get the selected files from the input
var files = fileSelect.files;

// Loop through each of the selected files
for(var i=0;i<files.length;i++){

// The file contained in the file list
var file = files[i];

// Add the file to the request
formData.append('file_input[]',file,file.name);

xhr.open('POST','upload',true);

// Send the data
xhr.send(formData);
}
};

// Set up a handler for when the request finishes
xhr.onload = function(){

if(xhr.status===200){

// File uploaded
uploadButton.innerHTML = 'Uploaded';
}else{
alert('An error occurred.File was not uploaded');
}
};

</script>

上传完成后。用户会自动重定向到另一个名为“upload”的网页 (upload.jsp),并由 Servlet (UploadServlet.java) 引用:

上传.jsp:

<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
Everything ok
</body>
</html>

UploadServlet.java:

@WebServlet(urlPatterns = {"/upload"})
public class UploadServlet extends HttpServlet {

/**
* Handles the HTTP <code>POST</code> method.
*
* @param request servlet request
* @param response servlet response
* @throws ServletException if a servlet-specific error occurs
* @throws IOException if an I/O error occurs
*/
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

System.out.println("I am in the servlet");

RequestDispatcher dispatcher=getServletContext().getRequestDispatcher("/WEB-INF/upload.jsp");
dispatcher.forward(request,response);
}

所选文件已正确上传到服务器。然而,当上传完成后,用户实际上并没有被重定向到“上传”网页。他仍然停留在“uploadForm”网页中,这不是我所期望的。

你能帮我一下吗?非常感谢您的解答

最佳答案

ajax 调用不会(直接)导致重定向。当您恢复 200 就绪状态更改时,让 javascript 执行重定向。您可以考虑让它返回文件已正确上传的信息并检查其验证,而不是在 servlet 中使用转发...

关于javascript - 文件上传后 AJAX 不重定向到网页 - POST 方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37310097/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com