最近一个项目需要使用一个上传控件进行多图片上传，给用户更好的体验，找到了plupload，用了一下感觉还是不错的，

1.从官网上  可以获得例子 ，我集成到了jsp，如下：



 
  1. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>  
    2. 

  2.   
    3. 

  3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
    4. 

  4. <html>  
    5. 

  5.   <head>  
    6. 

  6.     
    7. 

  7. <link media="screen" href="css/jquery-ui.min.css" rel="stylesheet" type="text/css">  
    8. 

  8. <link media="screen" href="css/jquery.ui.plupload.css" rel="stylesheet" type="text/css">  
    9. 

  9. <script  src="js/jquery.js" type="text/javascript"></script>  
    10. 

  10. <script charset="UTF-8" src="js/jquery-ui.min.js" type="text/javascript"></script>  
    11. 

  11. <script charset="UTF-8" src="js/plupload.full.min.js" type="text/javascript"></script>  
    12. 

  12. <script charset="UTF-8" src="js/jquery.ui.plupload.min.js" type="text/javascript"></script>  
    13. 

  13. <script  src="js/zh_CN.js" type="text/javascript"></script>  
    14. 

  14.  <script type="text/javascript">  
    15. 

  15. $(function() {  
    16. 

  16.     $("#uploader").plupload({  
    17. 

  17.         // General settings  
    18. 

  18.         runtimes : 'html5,flash,silverlight,html4,html',  
    19. 

  19.         url : "file/upload",  
    20. 

  20.    
    21. 

  21.         // Maximum file size  
    22. 

  22.         max_file_size : '20mb',  
    23. 

  23.    
    24. 

  24.         chunk_size: '10mb',  
    25. 

  25.    
    26. 

  26.         // Resize images on clientside if we can  
    27. 

  27.         resize : {  
    28. 

  28.             width : 1000,  
    29. 

  29.             height : 1000,  
    30. 

  30.             quality : 90,  
    31. 

  31.             crop: true // crop to exact dimensions  
    32. 

  32.         },  
    33. 

  33.    
    34. 

  34.         // Specify what files to browse for  
    35. 

  35.         filters : [  
    36. 

  36.             {title : "Image files", extensions : "jpg,gif,png"},  
    37. 

  37.             {title : "Zip files", extensions : "zip,avi"}  
    38. 

  38.         ],  
    39. 

  39.    
    40. 

  40.         // Rename files by clicking on their titles  
    41. 

  41.         rename: true,  
    42. 

  42.            
    43. 

  43.         // Sort files  
    44. 

  44.         sortable: true,  
    45. 

  45.    
    46. 

  46.         // Enable ability to drag'n'drop files onto the widget (currently only HTML5 supports that)  
    47. 

  47.         dragdrop: true,  
    48. 

  48.    
    49. 

  49.         // Views to activate  
    50. 

  50.         views: {  
    51. 

  51.             list: true,  
    52. 

  52.             thumbs: true, // Show thumbs  
    53. 

  53.             active: 'thumbs'  
    54. 

  54.         },  
    55. 

  55.    
    56. 

  56.         // Flash settings  
    57. 

  57.         flash_swf_url : 'js/Moxie.swf',  
    58. 

  58.        
    59. 

  59.         // Silverlight settings  
    60. 

  60.         silverlight_xap_url : 'js/Moxie.xap'  
    61. 

  61.     })  
    62. 

  62. });  
    63. 

  63. </script>  
    64. 

  64.   </head>  
    65. 

  65.     
    66. 

  66.   <body>  
    67. 

  67.   <div id="uploader">  
    68. 

  68.     </div>  
    69. 

  69.   </body>  
    70. 

  70. </html>  



2.导入相应的js文件，与css美化 ，结构如下:

3.到了这一步，基本上这个控件的样子出来了，下面是后台获取上传文件源码   (ps:本人用的springmvc)   上传文件用的
spring写好的 MultipartHttpServletRequest 这个类，首先，spring-mvc配置
MultipartHttpServletRequest 的视图配置



 
  1. <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">  
    2. 

  2.       <property name="maxUploadSize" value="104857600"/>  
    3. 

  3.         <property name="maxInMemorySize" value="4096"/>  
    4. 

  4.    </bean>  

4.控制器实现上传



  1. package com.springfreemark.web.controller;  
    2. 

  2.   
    3. 

  3. import java.io.File;  
    4. 

  4. import java.io.FileInputStream;  
    5. 

  5. import java.io.FileOutputStream;  
    6. 

  6. import java.io.IOException;  
    7. 

  7. import java.io.InputStream;  
    8. 

  8. import java.io.OutputStream;  
    9. 

  9. import java.util.HashMap;  
    10. 

  10. import java.util.Iterator;  
    11. 

  11. import java.util.Map;  
    12. 

  12. import java.util.Map.Entry;  
    13. 

  13.   
    14. 

  14. import javax.servlet.http.HttpServletRequest;  
    15. 

  15. import javax.servlet.http.HttpServletResponse;  
    16. 

  16.   
    17. 

  17. import org.apache.commons.fileupload.servlet.ServletFileUpload;  
    18. 

  18. import org.springframework.stereotype.Component;  
    19. 

  19. import org.springframework.web.bind.annotation.RequestMapping;  
    20. 

  20. import org.springframework.web.multipart.MultipartFile;  
    21. 

  21. import org.springframework.web.multipart.MultipartHttpServletRequest;  
    22. 

  22.   
    23. 

  23. @Component  
    24. 

  24. @RequestMapping("/file/")  
    25. 

  25. public class UploadController extends BaseController {  
    26. 

  26.     String UPLOADDIR="F:/upload";  
    27. 

  27.       
    28. 

  28.       
    29. 

  29.     @RequestMapping("upload")  
    30. 

  30.     public void exec(HttpServletRequest request,HttpServletResponse response){  
    31. 

  31.         MultipartHttpServletRequest multiReq = (MultipartHttpServletRequest) request;  
    32. 

  32.         HashMap<String, MultipartFile>  hashMap=(HashMap<String, MultipartFile>) multiReq.getFileMap();  
    33. 

  33.         InputStream  inputStream=null;  
    34. 

  34.         FileOutputStream outputStream=null;  
    35. 

  35.         try {  
    36. 

  36.         for (Entry<String,MultipartFile> entry : hashMap.entrySet()) {  
    37. 

  37.             MultipartFile  file = entry.getValue();  
    38. 

  38.             inputStream =  file.getInputStream();  
    39. 

  39.             File  fileDir= new File(UPLOADDIR);  
    40. 

  40.             if(!fileDir.exists()||!fileDir.isDirectory()){  
    41. 

  41.                 fileDir.mkdir();  
    42. 

  42.             }  
    43. 

  43.             File uploadFile= new File(UPLOADDIR+"/"+System.currentTimeMillis()+file.getOriginalFilename());  
    44. 

  44.             if(uploadFile.exists()){  
    45. 

  45.                 uploadFile.delete();  
    46. 

  46.             }  
    47. 

  47.             uploadFile.createNewFile();  
    48. 

  48.             outputStream  =new FileOutputStream(uploadFile);  
    49. 

  49.             byte[]  bs =  new byte[1024];  
    50. 

  50.             int len=0;  
    51. 

  51.             while ((len=inputStream.read(bs))>0) {  
    52. 

  52.                 outputStream.write(bs);  
    53. 

  53.             }  
    54. 

  54.             System.out.println(file.getOriginalFilename()+"上传成功");  
    55. 

  55.         }  
    56. 

  56.         response.getWriter().print("全部上传成功");  
    57. 

  57.         } catch (Exception e) {  
    58. 

  58.             // TODO Auto-generated catch block  
    59. 

  59.             e.printStackTrace();  
    60. 

  60.         }finally{  
    61. 

  61.             try {  
    62. 

  62.                 if(inputStream!=null){  
    63. 

  63.                     inputStream.close();  
    64. 

  64.                 }  
    65. 

  65.                 if(outputStream!=null){  
    66. 

  66.                     outputStream.close();  
    67. 

  67.                 }  
    68. 

  68.             } catch (Exception e) {  
    69. 

  69.                 // TODO: handle exception  
    70. 

  70.             }  
    71. 

  71.           
    72. 

  72.         }  
    73. 

  73.     }  
    74. 

  74. }  




至此，大功告成！



附上：

附件列表

js上传控件 plupload 使用记录的更多相关文章

  1. jquery文件上传控件 Uploadify 问题记录

    Uploadify v3.2.1 首先引用下面的文件 <!--上传控件 uploadify--> <script type="text/javascript" s ...

  2. 前端上传控件plupload总结

    plupload是一个单图和多图上传控件: 属性和方法介绍,参考以下博客: https://www.cnblogs.com/2050/p/3913184.html 这里直接贴出JS代码,细到爆的注释, ...

  3. 纯js上传控件——fineuploader

    fineuploader是一款基于ajax实现文件上传的插件,具有以下有点: A:支持文件上传进度显示. B:文件拖拽浏览器上传方式 C:Ajax页面无刷新. D:多文件上传. F:跨浏览器. E:跨 ...

  4. jquery.html5uploader.js 上传控件

    插件地址:http://blog.csdn.net/never_say_goodbye/article/details/8598521 先上个效果图: 相比来说,效果还是很不错的 使用MVC3做服务器 ...

  5. plupload上传控件错误exec(this.uid, component, action, args)

    plupload上传控件错误exec(this.uid, component, action, args) --undefined is not a function 原因:Flash元素隐藏后调用控 ...

  6. Js获取file上传控件的文件路径总结

    总结一个获取file上传控件文件路径的方法 firefox由于保护机制只有文件名,不能获取完整路径. document.getElementById('file').onchange = functi ...

  7. 百度 flash html5自切换 多文件异步上传控件webuploader基本用法

    双核浏览器下在chrome内核中使用uploadify总有302问题,也不知道如何修复,之所以喜欢360浏览器是因为帮客户控制渲染内核: 若页面需默认用极速核,增加标签:<meta name=& ...

  8. 对百度WebUploader开源上传控件的二次封装,精简前端代码(两句代码搞定上传)

    前言 首先声明一下,我这个是对WebUploader开源上传控件的二次封装,底层还是WebUploader实现的,只是为了更简洁的使用他而已. 下面先介绍一下WebUploader 简介: WebUp ...

  9. 基于AngularJs的上传控件－angular-file-upload

    今天跟大家分享的是一个依赖于angular的上传控件. 前段时间做项目遇到一个需求是上传文件,大概需要实现的样式是这样子的,见下图: 需要同时上传两个文件.并且规定文件格式和文件大小.因为前端框架使用 ...

随机推荐

  1. #!/usr/bin/env在脚本中的作用

    在linux的一些脚本,需在开头一行指定脚本的解释程序,如: #!/usr/bin/env bash #!/usr/bin/bash #!/usr/bin/env python  告诉操作系统执行这个 ...

  2. iOS：quartz2D绘图（处理图像,绘制图像并添加水印）

    绘制图像既可以重写drawRect:方法并在该方法中绘制,也可以不用重写该方法,它有封装好的函数获取自己的图像绘制上下文,即UIGraphicsBeginImageContext(CGSize siz ...

  3. Mybatis中动态SQL多条件查询

    Mybatis中动态SQL多条件查询 mybatis中用于实现动态SQL的元素有: if:用if实现条件的选择,用于定义where的字句的条件. choose(when otherwise)相当于Ja ...

  4. Android-标题状态栏的隐藏

    以下有两种方法,建议使用第一种方法:使用第一种方法,仅仅只需要在Manifest.xml文件中进行一行的配置就行了而且Activity在启动的时候也不会看到那个Title栏第一种方法:在配置文件中进行 ...

  5. CentOS6.8 4.4.43内核 安装PF_RING

    环境: 系统:CentOS 6.8 内核版本:4.4.43 PF_RING版本:6.9.0 编译PF_RING需要内核源码,由于我的机器上只有4.4.43版本的modules和4.4.43的源码,并没 ...

  6. 使用kubeadm部署Kubernetes v1.13.3

    kubeadm是官方社区推出的一个用于快速部署kubernetes集群的工具. 这个工具能通过两条指令完成一个kubernetes集群的部署: 1. 安装要求 在开始之前,部署Kubernetes集群 ...

  7. Animation学习笔记

    关于动画的实现,Android提供了Animation,在Android SDK介绍了2种Animation模式: 1. Tween Animation:通过对场景里的对象不断做图像变换(平移.缩放. ...

  8. Zxing二维码扫描

    源代码地址  有问题能够加QQ:312122330 之前对于Zbar的二位码扫描.到项目上线以后才发现扫描过于灵敏.导致有时候扫描到半截就启动了. 后来翻看ZXING的源代码,没有想象的复杂,复杂的地 ...

  9. IM开发基础知识补课(四)：正确理解HTTP短连接中的Cookie、Session和Token

    本文引用了简书作者“骑小猪看流星”技术文章“Cookie.Session.Token那点事儿”的部分内容,感谢原作者. 1.前言 众所周之,IM是个典型的快速数据流交换系统,当今主流IM系统(尤其移动 ...

  10. 算法笔记_055:蓝桥杯练习 Tricky and Clever Password （Java）

    目录 1 问题描述 2 解决方案   1 问题描述 问题描述 在年轻的时候,我们故事中的英雄——国王 Copa——他的私人数据并不是完全安全地隐蔽.对他来说是,这不可接受的.因此,他发明了一种密码,好 ...