HTML5结合JavaScript与Java实现单文件服务器上传
本文介绍如何在HTML5页面中利用JavaScript的FormData对象和Ajax技术,将单个文件异步上传至Java后端服务器。通过解析multipart/form-data请求并保存文件到指定目录,实现完整的文件上传功能,包含前端表单构建、Ajax配置及后端文件流处理代码示例。
单文件上传功能概述
将单个文件上传至服务器
根据公司要求,需在HTML5页面实现文件上传功能。对于一名尚未毕业的实习生而言,这颇具挑战。经过多次网络搜索和博客查阅未果后,最终请教公司资深开发人员,参考其提供的示例代码,成功完成了文件上传功能的开发。
接下来展示具体代码实现。
HTML5前端表单实现
HTML5部分的代码结构如下:
<form name="upform" action="" method="POST">
<input type ="file" name="myfile1" id="myfile1"/><br/>
<input type ="file" name="myfile2" id="myfile2"/><br/>
备注:<input type="text" name="mydata" id="mydata"/><br/>
<input type="button" value="确定" onclick="upload()"/><br/>
</form>
JavaScript异步上传逻辑
JavaScript部分的实现逻辑如下:
FormData对象可视为一个虚拟的表单容器,主要提供append方法,用于向其中添加需要提交的各项数据。
url:/adata/adata/payment/PaymentAction/upload.menu表示Java后端接收数据的Action路径。
_pathName=/adata//payment.jsp代表HTML5页面所在环境的虚拟路径。
alert(result);-------指代从Java后台返回给前端的处理结果信息。
function upload() {
mydata = document.getElementById("mydata").files[0];
formData = new FormData();
formData.append("mydata", mydata);
$.ajax({
contentType:"multipart/form-data",
url:"/adata/adata/payment/PaymentAction/upload.menu?_pathName=/adata//payment.jsp",
type:"POST",
data:formData,
dataType:"text",
processData: false, // 告诉jQuery不要去处理发送的数据
contentType: false, // 告诉jQuery不要去设置Content-Type请求头
success: function(result){
alert(result);
}
});
}
Java后端文件处理
Java后端处理代码如下:
String savePath = "d:/";//存储路径
String retMsg = "";//定义将返回给客户端的信息
try {
if (ServletFileUpload.isMultipartContent(request)) {
List<FileItem> items = new ServletFileUpload(new DiskFileItemFactory()).parseRequest(request);
for (FileItem item : items) {
if (!item.isFormField()) {// 过滤掉表单中非文件域
String fileType = item.getName().substring(item.getName().lastIndexOf(".") + 1).toLowerCase();//文件类型
String fileName = new Date().getTime() + "." + fileType; //保存的文件名
String filePath = savePath + "\\" + fileName; //保存的文件路径
BufferedInputStream in = new BufferedInputStream(item.getInputStream());// 获得文件输入流
BufferedOutputStream out = new BufferedOutputStream(new FileOutputStream(new File(filePath)));// 获得文件输出流
org.apache.commons.fileupload.util.Streams.copy(in, out, true);// 开始把文件写到指定的上传文件夹
retMsg += "上传文件成功!";
in.close();
out.close();
}
}
}
response.setContentType("text/html;charset=utf8");
PrintWriter pw = response.getWriter();
pw.print(retMsg);
pw.flush();
pw.close();
//根据自己需要返回页面一个 retMsg
// return retMsg 证明上传成功
} catch (Exception e) {
e.printStackTrace();
}
总结
上述内容介绍了基于HTML5、JavaScript和Java实现单文件上传至服务器的完整功能,希望能对读者有所帮助。如有任何疑问,欢迎留言,作者将及时回复。
JS转整数出现NaN怎么办?常见异常处理方案
2026-11-05 16:27:31
推荐几款免安装的在线JS压缩工具
2026-11-05 14:54:53
JS怎么使用JSON.stringify实现JSON格式化与缩进
2026-11-04 10:47:30
CodePen、JSFiddle 与 StackBlitz:主流 JS 在线编辑器对比
2026-11-03 21:07:49
JS字符串转数字后怎么正确判断是否为有效数值
2026-11-03 20:04:15
