HTML5结合JavaScript与Java实现单文件服务器上传

作者:清欢时间:2026-10-22 07:30:56浏览:195

本文介绍如何在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实现单文件上传至服务器的完整功能,希望能对读者有所帮助。如有任何疑问,欢迎留言,作者将及时回复。

作者最新文章