基于HTML5+js+Java实现单文件文件上传到服务器功能

 更新时间:2017年08月20日 09:09:19   作者:ML夜神  
应公司要求,在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> 

js代码:

FormData可以把它理解成一个虚拟的表单对象,它只有一个方法append,我们可以通过append向FormData里面添加各种需要提交的数据。

 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代码:

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+js+Java实现单文件文件上传到服务器功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

相关文章

  • Java DecimalFormat 保留小数位及四舍五入的陷阱介绍

    Java DecimalFormat 保留小数位及四舍五入的陷阱介绍

    这篇文章主要介绍了Java DecimalFormat 保留小数位及四舍五入的陷阱,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2021-10-10
  • IDEA类与方法注释模板设置图文教程(非常详细)

    IDEA类与方法注释模板设置图文教程(非常详细)

    IDEA自带的注释模板不是太好用,我本人到网上搜集了很多资料系统的整理了一下制作了一份比较完整的模板来分享给大家,下面这篇文章主要给大家介绍了关于IDEA类与方法注释模板设置的相关资料,需要的朋友可以参考下
    2022-09-09
  • SpringBoot处理大量请求数据的传输问题的方法小结

    SpringBoot处理大量请求数据的传输问题的方法小结

    在Spring Boot项目常常需要中处理大量请求数据的传输问题,这篇文章主要为大家整理了一些常用的方法,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-01-01
  • Spring mvc服务端数据校验实现流程详解

    Spring mvc服务端数据校验实现流程详解

    这篇文章主要介绍了Spring mvc服务端数据校验实现流程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-09-09
  • Spring中@RequestParam、@RequestBody和@PathVariable的用法详解

    Spring中@RequestParam、@RequestBody和@PathVariable的用法详解

    这篇文章主要介绍了Spring中@RequestParam、@RequestBody和@PathVariable的用法详解,后端使用集合来接受参数,灵活性较好,如果url中没有对参数赋key值,后端在接收时,会根据参数值的类型附,赋一个初始key,需要的朋友可以参考下
    2024-01-01
  • Mybatis 级联删除的实现

    Mybatis 级联删除的实现

    这篇文章主要介绍了Mybatis 级联删除的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • SpringBoot使用AOP记录接口操作日志的方法

    SpringBoot使用AOP记录接口操作日志的方法

    日志记录量是很大的,所以只记录关键地方并按期归档,最好是存在如elasticsearch中,如果存在数据库中,分表是不错的选择,这篇文章主要介绍了SpringBoot使用AOP记录接口操作日志的方法,需要的朋友可以参考下
    2022-08-08
  • 基于selenium-java封装chrome、firefox、phantomjs实现爬虫

    基于selenium-java封装chrome、firefox、phantomjs实现爬虫

    这篇文章主要介绍了基于selenium-java封装chrome、firefox、phantomjs实现爬虫,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2020-10-10
  • Java IO中字节流复制图片实现代码

    Java IO中字节流复制图片实现代码

    这篇文章主要介绍了Java IO中字节流复制图片实现代码的相关资料,需要的朋友可以参考下
    2017-04-04
  • Java Spring MVC获取请求数据详解操作

    Java Spring MVC获取请求数据详解操作

    Spring MVC 是 Spring 提供的一个基于 MVC 设计模式的轻量级 Web 开发框架,本质上相当于 Servlet,Spring MVC 角色划分清晰,分工明细。由于 Spring MVC 本身就是 Spring 框架的一部分,可以说和 Spring 框架是无缝集成
    2021-11-11

最新评论