最近一个项目需要使用一个上传控件进行多图片上传，给用户更好的体验，找到了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. 使用神经网络识别手写数字Using neural nets to recognize handwritten digits

    The human visual system is one of the wonders of the world. Consider the following sequence of handw ...

  2. [转]SSIS - Connect to Oracle on a 64-bit machine (Updated for SSIS 2008 R2)

    本文转自:http://sqlblog.com/blogs/jorg_klein/archive/2011/06/09/ssis-connect-to-oracle-on-a-64-bit-machi ...

  3. [转]Insert, Update, and Delete Destination table with SSIS

    本文转自:http://www.rad.pasfu.com/index.php?/archives/150-Insert,-Update,-and-Delete-Destination-table-w ...

  4. [Todo]各种语言包管理工具

    看到一篇文章不错: http://harttle.com/2015/05/29/pkg-manager.html 包管理和构建系统是现代的软件开发团队中必不可少的工具,也是Linux软件系统的常见组织 ...

  5. python利用opencv去除水印方法

    OpenCV(Open Source Computer Vision Library)是一个跨平台计算机视觉库,实现了图像处理和计算机视觉方面的很多通用算法 在python中可以利用opencv来去除 ...

  6. http://www.cnblogs.com/alipayhutu/archive/2012/08/16/2643098.html

    http://www.cnblogs.com/alipayhutu/archive/2012/08/16/2643098.html

  7. Ubuntu14.04配置nginx开机自启动项

    原文: https://www.jianshu.com/p/2e03255cfabb ubuntu配置开机自动启动服务 ---------------------------------------- ...

  8. python 静态成员变量

    python 静态成员变量 python 也可以定义静态成员变量,就是类的变量. 注意python的静态成员变量只能通过 类.变量名 的形式获取 class A: a1 = 0 def __init_ ...

  9. js调试工具console方法详解

    一.显示信息的方法 最常用的console.log(),一般用来调试. console.log('hello'); console.info('信息'); console.error('错误'); c ...

  10. 使用Kotlin创建Android项目

    如果你已经使用过Android Studio和Gradle,那么这一章会比较简单.我不会给出很多细节和截图,因为用户界面和细节可能会一直变化. 我们的应用是由一个简单的天气app组成,正如所使用的Go ...