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

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



  1. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>  
  2.   
  3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  4. <html>  
  5.   <head>  
  6.     
  7. <link media="screen" href="css/jquery-ui.min.css" rel="stylesheet" type="text/css">  
  8. <link media="screen" href="css/jquery.ui.plupload.css" rel="stylesheet" type="text/css">  
  9. <script  src="js/jquery.js" type="text/javascript"></script>  
  10. <script charset="UTF-8" src="js/jquery-ui.min.js" type="text/javascript"></script>  
  11. <script charset="UTF-8" src="js/plupload.full.min.js" type="text/javascript"></script>  
  12. <script charset="UTF-8" src="js/jquery.ui.plupload.min.js" type="text/javascript"></script>  
  13. <script  src="js/zh_CN.js" type="text/javascript"></script>  
  14.  <script type="text/javascript">  
  15. $(function() {  
  16.     $("#uploader").plupload({  
  17.         // General settings  
  18.         runtimes : 'html5,flash,silverlight,html4,html',  
  19.         url : "file/upload",  
  20.    
  21.         // Maximum file size  
  22.         max_file_size : '20mb',  
  23.    
  24.         chunk_size: '10mb',  
  25.    
  26.         // Resize images on clientside if we can  
  27.         resize : {  
  28.             width : 1000,  
  29.             height : 1000,  
  30.             quality : 90,  
  31.             crop: true // crop to exact dimensions  
  32.         },  
  33.    
  34.         // Specify what files to browse for  
  35.         filters : [  
  36.             {title : "Image files", extensions : "jpg,gif,png"},  
  37.             {title : "Zip files", extensions : "zip,avi"}  
  38.         ],  
  39.    
  40.         // Rename files by clicking on their titles  
  41.         rename: true,  
  42.            
  43.         // Sort files  
  44.         sortable: true,  
  45.    
  46.         // Enable ability to drag'n'drop files onto the widget (currently only HTML5 supports that)  
  47.         dragdrop: true,  
  48.    
  49.         // Views to activate  
  50.         views: {  
  51.             list: true,  
  52.             thumbs: true, // Show thumbs  
  53.             active: 'thumbs'  
  54.         },  
  55.    
  56.         // Flash settings  
  57.         flash_swf_url : 'js/Moxie.swf',  
  58.        
  59.         // Silverlight settings  
  60.         silverlight_xap_url : 'js/Moxie.xap'  
  61.     })  
  62. });  
  63. </script>  
  64.   </head>  
  65.     
  66.   <body>  
  67.   <div id="uploader">  
  68.     </div>  
  69.   </body>  
  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.       <property name="maxUploadSize" value="104857600"/>  
  3.         <property name="maxInMemorySize" value="4096"/>  
  4.    </bean>  

4.控制器实现上传



  1. package com.springfreemark.web.controller;  
  2.   
  3. import java.io.File;  
  4. import java.io.FileInputStream;  
  5. import java.io.FileOutputStream;  
  6. import java.io.IOException;  
  7. import java.io.InputStream;  
  8. import java.io.OutputStream;  
  9. import java.util.HashMap;  
  10. import java.util.Iterator;  
  11. import java.util.Map;  
  12. import java.util.Map.Entry;  
  13.   
  14. import javax.servlet.http.HttpServletRequest;  
  15. import javax.servlet.http.HttpServletResponse;  
  16.   
  17. import org.apache.commons.fileupload.servlet.ServletFileUpload;  
  18. import org.springframework.stereotype.Component;  
  19. import org.springframework.web.bind.annotation.RequestMapping;  
  20. import org.springframework.web.multipart.MultipartFile;  
  21. import org.springframework.web.multipart.MultipartHttpServletRequest;  
  22.   
  23. @Component  
  24. @RequestMapping("/file/")  
  25. public class UploadController extends BaseController {  
  26.     String UPLOADDIR="F:/upload";  
  27.       
  28.       
  29.     @RequestMapping("upload")  
  30.     public void exec(HttpServletRequest request,HttpServletResponse response){  
  31.         MultipartHttpServletRequest multiReq = (MultipartHttpServletRequest) request;  
  32.         HashMap<String, MultipartFile>  hashMap=(HashMap<String, MultipartFile>) multiReq.getFileMap();  
  33.         InputStream  inputStream=null;  
  34.         FileOutputStream outputStream=null;  
  35.         try {  
  36.         for (Entry<String,MultipartFile> entry : hashMap.entrySet()) {  
  37.             MultipartFile  file = entry.getValue();  
  38.             inputStream =  file.getInputStream();  
  39.             File  fileDir= new File(UPLOADDIR);  
  40.             if(!fileDir.exists()||!fileDir.isDirectory()){  
  41.                 fileDir.mkdir();  
  42.             }  
  43.             File uploadFile= new File(UPLOADDIR+"/"+System.currentTimeMillis()+file.getOriginalFilename());  
  44.             if(uploadFile.exists()){  
  45.                 uploadFile.delete();  
  46.             }  
  47.             uploadFile.createNewFile();  
  48.             outputStream  =new FileOutputStream(uploadFile);  
  49.             byte[]  bs =  new byte[1024];  
  50.             int len=0;  
  51.             while ((len=inputStream.read(bs))>0) {  
  52.                 outputStream.write(bs);  
  53.             }  
  54.             System.out.println(file.getOriginalFilename()+"上传成功");  
  55.         }  
  56.         response.getWriter().print("全部上传成功");  
  57.         } catch (Exception e) {  
  58.             // TODO Auto-generated catch block  
  59.             e.printStackTrace();  
  60.         }finally{  
  61.             try {  
  62.                 if(inputStream!=null){  
  63.                     inputStream.close();  
  64.                 }  
  65.                 if(outputStream!=null){  
  66.                     outputStream.close();  
  67.                 }  
  68.             } catch (Exception e) {  
  69.                 // TODO: handle exception  
  70.             }  
  71.           
  72.         }  
  73.     }  
  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. Linux内核源码情景分析-系统调用

    一.系统调用初始化 void __init trap_init(void) { ...... set_system_gate(SYSCALL_VECTOR,&system_call);//0x ...

  2. POJ 2664 Prerequisites?(简单题)

    [题意简述]:k:已经选择的科目数:m:选择的科目类别:c:能够选择的科目数.r:要求最少选择的科目数量 在输入的k和m以下的一行是选择的科目号. 比如: 3 2 //3是他选择了3科.2表示选择了两 ...

  3. 【云计算】Ubuntu14.04 搭建GlusterFS集群

    1.修改 /etc/hosts 所有服务节点执行(如果集群中没有DNS,可忽略此步骤): 10.5.25.37 glusterfs-1-5-25-3710.5.25.38 glusterfs-2-5- ...

  4. MVVM和MVC的区别,以及MVVM的缺点

    MVVM和MVC的区别 MVC和MVVM的区别其实并不大.都是一种设计思想. 主要就是MVC中Controller演变成MVVM中的viewModel. MVVM主要解决了MVC中大量的DOM操作使页 ...

  5. 手写Json转换

    在做项目的时候总是要手动将集合转换成json每次都很麻烦,于是就尝试着写了一个公用的方法,用于转换List to json: using System; using System.Collection ...

  6. Microsoft.Office.Workflow.Actions Namespace

    Microsoft.Office.Workflow.Actions Namespace SharePoint 2010   Contains the workflow activities that ...

  7. [TypeScript] Type Definitions and Modules

    For example you are building your own module, the same as Lodash: my-lodash.d.ts declare module &quo ...

  8. AFNetworking 文件上传Data,File图片,文件等上传

    一:AFNetworking的文件上传: 主要几个以下类似 - (BOOL)appendPartWithFileURL:(NSURL *)fileURL name:(NSString *)name e ...

  9. Linux 静态链接库和动态连接库

    (0)文件夹 VMware 下安装Ubuntu的吐血经历 零基础学习Shell编程 Linux下的makefile的妙用 Linux调试神器 -- gdb 十分钟学会Python的基本类型 Linux ...

  10. 算法笔记_060:蓝桥杯练习 出现次数最多的整数(Java)

    目录 1 问题描述 2 解决方案   1 问题描述 问题描述 编写一个程序,读入一组整数,这组整数是按照从小到大的顺序排列的,它们的个数N也是由用户输入的,最多不会超过20.然后程序将对这个数组进行统 ...