Plupload 是一个Web浏览器上的界面友好的文件上传模块,可显示上传进度、图像自动缩略和上传分块。可同时上传多个文件;

  上网找了很多Plupload的DEMO都无法正常使用, 而且Plupload官方的DEMO是基于PHP, 折腾了半天, 写了一个基于JAVA的DEMO;

  Plupload支持多种方式上传, 包括,flash上传(解决了不同服务器跨域的问题), html5方式上传, html4上传, silverlight的方式上传, Plupload的核心是另外一个JS库:

    MOXIE, MOXIE提供了Plupload的运行环境, 也可以单独拿出来使用, 代码量(体积)挺大的,MOXIE提供了下面几种上传环境:  

      

  Plupload支持分块上传, 支持拖拽上传, 支持图片切块, 支持30多种语言, 而且提供了丰富的API, 因为支持多种方式上传, 可以比较放心的使用这个JS插件;

  容器是tomcat, 需要java的spring框架, 需要apache的几个jar包, commons.fileupload等....;

  以下代码是处理文件上传的java代码:

运行下面代码

  1. package controller;
  2.  
  3. import java.io.BufferedOutputStream;
  4. import java.io.File;
  5. import java.io.FileOutputStream;
  6. import java.io.IOException;
  7. import java.util.HashMap;
  8. import java.util.List;
  9. import java.util.Map;
  10. import java.util.ResourceBundle;
  11. import java.util.UUID;
  12.  
  13. import javax.servlet.ServletConfig;
  14. import javax.servlet.http.HttpServletRequest;
  15. import javax.servlet.http.HttpServletResponse;
  16.  
  17. import org.apache.commons.fileupload.FileItem;
  18. import org.apache.commons.fileupload.FileUploadException;
  19. import org.apache.commons.fileupload.disk.DiskFileItemFactory;
  20. import org.apache.commons.fileupload.servlet.ServletFileUpload;
  21. import org.apache.commons.io.FileUtils;
  22. import org.apache.commons.io.FilenameUtils;
  23. import org.springframework.stereotype.Controller;
  24. import org.springframework.web.bind.annotation.RequestMapping;
  25. import org.springframework.web.bind.annotation.RequestMethod;
  26. import org.springframework.web.bind.annotation.ResponseBody;
  27.  
  28. import com.alibaba.fastjson.JSON;
  29.  
  30. @Controller
  31. public class mainController {
  32.  
  33. String uploadPath;
  34. private static final ResourceBundle bundle = ResourceBundle.getBundle( "config" );
  35.  
  36. @RequestMapping(value="uploadFile.do", method=RequestMethod.POST)
  37. public void uploadFile( HttpServletRequest request, HttpServletResponse response ) throws IOException {
  38.  
  39. response.setCharacterEncoding( "UTF-8" );
  40. Integer chunk = null; /* 分割块数 */
  41. Integer chunks = null; /* 总分割数 */
  42. String tempFileName = null; /* 临时文件名 */
  43. String newFileName = null; /* 最后合并后的新文件名 */
  44. BufferedOutputStream outputStream = null;
  45.  
  46. /* System.out.println(FileUtils.getTempDirectoryPath()); */
  47. uploadPath = request.getServletContext().getRealPath( bundle.getString( "uploadPath" ) );
  48. File up = new File( uploadPath );
  49. if ( !up.exists() )
  50. {
  51. up.mkdir();
  52. }
  53.  
  54. if ( ServletFileUpload.isMultipartContent( request ) )
  55. {
  56. try {
  57. DiskFileItemFactory factory = new DiskFileItemFactory();
  58. factory.setSizeThreshold( 1024 );
  59. /* factory.setRepository(new File(repositoryPath));// 设置临时目录 */
  60. ServletFileUpload upload = new ServletFileUpload( factory );
  61. upload.setHeaderEncoding( "UTF-8" );
  62. /* upload.setSizeMax(5 * 1024 * 1024);// 设置附件最大大小,超过这个大小上传会不成功 */
  63. List<FileItem> items = upload.parseRequest( request );
  64. for ( FileItem item : items )
  65. {
  66. if ( item.isFormField() ) /* 是文本域 */
  67. {
  68. if ( item.getFieldName().equals( "name" ) )
  69. {
  70. tempFileName = item.getString();
  71. /* System.out.println("临时文件名:" + tempFileName); */
  72. } else if ( item.getFieldName().equals( "chunk" ) )
  73. {
  74. chunk = Integer.parseInt( item.getString() );
  75. /* System.out.println("当前文件块:" + (chunk + 1)); */
  76. } else if ( item.getFieldName().equals( "chunks" ) )
  77. {
  78. chunks = Integer.parseInt( item.getString() );
  79. /* System.out.println("文件总分块:" + chunks); */
  80. }
  81. } else { /* 如果是文件类型 */
  82. if ( tempFileName != null )
  83. {
  84. String chunkName = tempFileName;
  85. if ( chunk != null )
  86. {
  87. chunkName = chunk + "_" + tempFileName;
  88. }
  89. File savedFile = new File( uploadPath, chunkName );
  90. item.write( savedFile );
  91. }
  92. }
  93. }
  94.  
  95. newFileName = UUID.randomUUID().toString().replace( "-", "" )
  96. .concat( "." )
  97. .concat( FilenameUtils.getExtension( tempFileName ) );
  98. if ( chunk != null && chunk + 1 == chunks )
  99. {
  100. outputStream = new BufferedOutputStream(
  101. new FileOutputStream( new File( uploadPath, newFileName ) ) );
  102. /* 遍历文件合并 */
  103. for ( int i = 0; i < chunks; i++ )
  104. {
  105. File tempFile = new File( uploadPath, i + "_" + tempFileName );
  106. byte[] bytes = FileUtils.readFileToByteArray( tempFile );
  107. outputStream.write( bytes );
  108. outputStream.flush();
  109. tempFile.delete();
  110. }
  111. outputStream.flush();
  112. }
  113. Map<String, Object> m = new HashMap<String, Object>();
  114. m.put( "status", true );
  115. m.put( "fileUrl", bundle.getString( "uploadPath" ) + "/"
  116. + newFileName );
  117. response.getWriter().write( JSON.toJSONString( m ) );
  118. } catch ( FileUploadException e ) {
  119. e.printStackTrace();
  120. Map<String, Object> m = new HashMap<String, Object>();
  121. m.put( "status", false );
  122. response.getWriter().write( JSON.toJSONString( m ) );
  123. } catch ( Exception e ) {
  124. e.printStackTrace();
  125. Map<String, Object> m = new HashMap<String, Object>();
  126. m.put( "status", false );
  127. response.getWriter().write( JSON.toJSONString( m ) );
  128. } finally {
  129. try {
  130. if ( outputStream != null )
  131. outputStream.close();
  132. } catch ( IOException e ) {
  133. e.printStackTrace();
  134. }
  135. }
  136. }
  137. }
  138.  
  139. public void main() {
  140.  
  141. }
  142.  
  143. }

  

  前端界面的主要代码:

运行下面代码

  1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6. <title>plupload示例</title>
  7. <script src="http://cdn.bootcss.com/jquery/1.9.0/jquery.js"></script>
  8. <script type="text/javascript" src="${pageContext.request.contextPath}/js/plupload.full.min.js"></script>
  9.  
  10. </head>
  11. <body>
  12. <div id="filelist">
  13.  
  14. </div>
  15. <button id="uploader">选择文件</button>
  16. <div id="progress"></div>
  17. <div id="result"></div>
  18. </body>
  19. <script type="text/javascript">
  20. var uploader = new plupload.Uploader({
  21. runtimes : 'html5,flash,silverlight',//设置运行环境,会按设置的顺序,可以选择的值有html5,gears,flash,silverlight,browserplus,html
  22. flash_swf_url : './js/Moxie.swf',
  23. silverlight_xap_url : './js/Moxie.xap',
  24. url : '${pageContext.request.contextPath}/uploadFile.do',//上传文件路径
  25. max_file_size : '3gb',//100b, 10kb, 10mb, 1gb
  26. chunk_size : '1mb',//分块大小,小于这个大小的不分块
  27. unique_names : true,//生成唯一文件名
  28. browse_button : 'uploader',
  29. filters : [ {
  30. title : 'Image files',
  31. extensions : 'jpg,gif,png'
  32. }, {
  33. title : 'Zip files',
  34. extensions : 'zip,7z,rar'
  35. } ],
  36.  
  37. init : {
  38. FilesAdded: function(up, files) {
  39.  
  40. uploader.start();
  41. return false;
  42. },
  43. FileUploaded : function(up, file, info) {//文件上传完毕触发
  44. console.log("单独文件上传完毕");
  45. var response = $.parseJSON(info.response);
  46. if (response.status) {
  47. $('#result').append( $('<div> "文件路径是:"' + response.fileUrl + '"随机的文件名字为:"' + file.name + '</div>') );
  48. }
  49. },
  50. UploadComplete : function( uploader,files ) {
  51. console.log("所有文件上传完毕");
  52. },
  53. UploadProgress : function( uploader,file ) {
  54. $("#progress").html("上传进度为:" + file.percent + "%");
  55. console.log( file.percent );
  56. }
  57. }
  58. });
  59.  
  60. uploader.init();
  61. </script>
  62. </html>

  

  整体界面如下:

  

  整体代码放在baidu云盘: 打开下载

  github项目

  plupload中文文档

  百度网盘链接

天道酬勤

Plupload上传组件 + javaweb实现上传源码以及DEMO的更多相关文章

  1. 如何优雅的阅读 GitHub 上开源 js 框架和库的源码

    如何优雅的阅读 GitHub 上开源 js 框架和库的源码 step 先总后分,即先了解一下啊框架的大体架构,又一个全局的认识,在选择某些和感兴趣的部分,仔细阅读,各个击破: 带着问题阅读,用到了什么 ...

  2. php文件上传原理详解(含源码)

    1.文件上传原理 将客户端的文件上传到服务器,再将服务器的临时文件上传到指定目录 2.客户端配置 提交表单 表单的发送方式为post 添加enctype="multipart/form-da ...

  3. SpringMVC+BUI实现文件上传(附详解,源码下载)

    中午有限时间写这博文,前言就不必多说了,直奔主题吧. BUI是一个前端框架,关于BUI的介绍请看博主的文章那些年用过的一些前端框架. 下面我们开始实例的讲解! 一.效果演示: 上传成功后,会发现本地相 ...

  4. 微信小程序多图上传/朋友圈传图效果【附完整源码】

    效果图 部分源代码 js文件: var uploadPicture = require('../Frameworks/common.js') //获取应用实例 const app = getApp() ...

  5. v79.01 鸿蒙内核源码分析(用户态锁篇) | 如何使用快锁Futex(上) | 百篇博客分析OpenHarmony源码

    百篇博客分析|本篇为:(用户态锁篇) | 如何使用快锁Futex(上) 进程通讯相关篇为: v26.08 鸿蒙内核源码分析(自旋锁) | 当立贞节牌坊的好同志 v27.05 鸿蒙内核源码分析(互斥锁) ...

  6. 在centos7上安装gcc、node.js(源码下载)

    一.在centos7中安装node.js https://www.cnblogs.com/lpbottle/p/7733397.html 1.从源码下载Nodejs cd /usr/local/src ...

  7. Windows上IDEA搭建最新Spark2.4.3源码调试的开发环境

    相信很多同学都想通过阅读一些框架的源码,来提高自己的代码能力,但往往在第一步,搭建环境的时候就碰了壁. 本篇就来介绍下如何在Windows下,将最新版的Spark2.4.3编译,并导入到IDEA编译器 ...

  8. GitHub 上值得参考的完整的 iOS-App 源码

    转自:https://www.zhihu.com/question/28518265 作者:wjh2005链接:https://www.zhihu.com/question/28518265/answ ...

  9. 史上最详细的Android消息机制源码解析

    本人只是Android菜鸡一个,写技术文章只是为了总结自己最近学习到的知识,从来不敢为人师,如果里面有不正确的地方请大家尽情指出,谢谢! 606页Android最新面试题含答案,有兴趣可以点击获取. ...

随机推荐

  1. 剑指offer四:链表中倒数第k个结点

    输入一个链表,输出该链表中倒数第K个结点 public class ListNode { int val; ListNode next = null; ListNode(int val) { this ...

  2. Linux 的 strace 命令

    https://linux.cn/article-3935-1.html http://www.cnblogs.com/ggjucheng/archive/2012/01/08/2316692.htm ...

  3. js加密解密

    <script> document.write("<xmp>"); document.write(function(p,a,c,k,e,r){}(''.sp ...

  4. 关键字volatile

    一个定义为volatile的变量是说这变量可能会被意想不到地改变,这样,编译器就不会去假设这个变量的值了.精确地说就是,优化器在用到这个变量时必须每次都小心地重新读取这个变量的值,而不是使用保存在寄存 ...

  5. Docker实践,来自沪江、滴滴、蘑菇街架构师的交流分享

    架构师小组交流会:每期选一个时下最热门的技术话题进行实践经验分享. 第一期主题:容器实践.Docker 作为当前最具颠覆性的开源技术之一,其轻量虚拟化.可移植性是CI/CD,DevOps,微服务的重要 ...

  6. Web之路笔记之四

    2014秋季学期Web2.0课程作业 <Homework1 - Recipe> 给出内容的文本文档,根据要求编写html和css.基本上没有难点. 1. 需要添加标签栏名称前面的小图标,是 ...

  7. Web之路笔记之二 - CSS Positioning

    CSS中控制各个Block element的位置方式之一,tag为position,有4种属性. 1. static 一般网页默认的属性,表示element根据页面正常流(normal flow)进行 ...

  8. bind_module和DEFAULT_MODULE

    在入口文件中定义define('BIND_MODULE', 'Admin'); 默认就会去找Admin模块. 配置文件中的 'DEFAULT_MODULE' => 'Home', // 默认模块 ...

  9. 深入浅出Mybatis系列(十)---SQL执行流程分析(源码篇)

    最近太忙了,一直没时间继续更新博客,今天忙里偷闲继续我的Mybatis学习之旅.在前九篇中,介绍了mybatis的配置以及使用, 那么本篇将走进mybatis的源码,分析mybatis 的执行流程, ...

  10. oracle Net Manager 服务命名无法配置(无法新建、添加服务名)

    今天在配置oracle Net Manager 配置服务命名的时候总是无法配置,以前配置的服务名都显示不出来,然后点击绿色添加按钮也没反应,因为先前我修改了oracle\product\10.2.0\ ...