【JSP】文件上传局部刷新

最新推荐文章于 2023-02-24 11:54:48 发布

原创

最新推荐文章于 2023-02-24 11:54:48 发布 · 2.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#文件上传 #局部刷新 #文件上传局部刷新 #jsp文件上传

本文介绍了如何在JSP中实现文件上传的局部刷新，由于JavaScript无法直接访问客户端文件系统，因此不能使用Ajax。解决方案是利用隐藏的iframe进行同步提交。通过设置表单的POST方式和enctype属性，结合开源项目commons-fileupload，可以在不刷新整个页面的情况下完成文件上传。在Servlet中处理上传并获取表单数据时，需要注意request.getParameter()在multipart/form-data表单时无效，应使用FileItem的相关方法。

看到局部刷新，大家联想到的肯定是Ajax，但实际上，Ajax是没有办法实现文件上传的局部刷新的。由于安全性的需要，JavaScript代码是不能访问客户端文件系统，所以通过XMLHttpRequest的请求参数是无法得到上传文件的内容的，只能得到文件名。

那么我们又是怎样实现文件上传局部刷新的呢？其实我们再上传文件的时候采用的还是同步方式，为了不刷新整个页面，我们需要用到隐藏的iframe，我们在页面上增加一个隐藏的<iframe>元素，该元素将会作为提交表单的target。

文件上传要求表单的提交方式是POST，另外需要设置表单的MIME编码enctype="multipart/form-data"。页面代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>upload</title>
</head>
<body>
	<form action="UploadServlet" method="post" enctype="multipart/form-data" target="hideframe">
		<input type="file" name="file"/>
		<input type="submit" value="上传"/>
	</form>
	<iframe name="hideframe" style="display:none"></iframe>
</body>
</html>

表单的target属性对应与<iframe&g