最近一个项目需要使用一个上传控件进行多图片上传，给用户更好的体验，找到了plupload，用了一下感觉还是不错的，
1.从官网上 可以获得例子 ，我集成到了jsp，如下：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><link media="screen" href="css/jquery-ui.min.css" rel="stylesheet" type="text/css"><link media="screen" href="css/jquery.ui.plupload.css" rel="stylesheet" type="text/css"><script src="js/jquery.js" type="text/javascript"></script><script charset="UTF-8" src="js/jquery-ui.min.js" type="text/javascript"></script><script charset="UTF-8" src="js/plupload.full.min.js" type="text/javascript"></script><script charset="UTF-8" src="js/jquery.ui.plupload.min.js" type="text/javascript"></script><script src="js/zh_CN.js" type="text/javascript"></script><script type="text/javascript">$(function() {$("#uploader").plupload({// General settingsruntimes : 'html5,flash,silverlight,html4,html',url : "file/upload",// Maximum file sizemax_file_size : '20mb',chunk_size: '10mb',// Resize images on clientside if we canresize : {width : 1000,height : 1000,quality : 90,crop: true // crop to exact dimensions},// Specify what files to browse forfilters : [{ title : "Image files", extensions : "jpg,gif,png"},{ title : "Zip files", extensions : "zip,avi"}],// Rename files by clicking on their titlesrename: true,// Sort filessortable: true,// Enable ability to drag'n'drop files onto the widget (currently only HTML5 supports that)dragdrop: true,// Views to activateviews: {list: true,thumbs: true, // Show thumbsactive: 'thumbs'},// Flash settingsflash_swf_url : 'js/Moxie.swf',// Silverlight settingssilverlight_xap_url : 'js/Moxie.xap'})});</script></head><body><div id="uploader"></div></body></html>
2.导入相应的js文件，与css美化 ，结构如下:
3.到了这一步，基本上这个控件的样子出来了，下面是后台获取上传文件源码 (ps:本人用的springmvc) 上传文件用的 spring写好的 MultipartHttpServletRequest 这个类，首先，spring-mvc配置 MultipartHttpServletRequest 的视图配置
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"><property name="maxUploadSize" value="104857600"/><property name="maxInMemorySize" value="4096"/></bean>
4.控制器实现上传
package com.springfreemark.web.controller;import java.io.File;import java.io.FileInputStream;import java.io.FileOutputStream;import java.io.IOException;import java.io.InputStream;import java.io.OutputStream;import java.util.HashMap;import java.util.Iterator;import java.util.Map;import java.util.Map.Entry;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.apache.commons.fileupload.servlet.ServletFileUpload;import org.springframework.stereotype.Component;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.multipart.MultipartFile;import org.springframework.web.multipart.MultipartHttpServletRequest;@Component@RequestMapping("/file/")public class UploadController extends BaseController {String UPLOADDIR="F:/upload";@RequestMapping("upload")public void exec(HttpServletRequest request,HttpServletResponse response){MultipartHttpServletRequest multiReq = (MultipartHttpServletRequest) request;HashMap<String, MultipartFile> hashMap=(HashMap<String, MultipartFile>) multiReq.getFileMap();InputStream inputStream=null;FileOutputStream outputStream=null;try {for (Entry<String,MultipartFile> entry : hashMap.entrySet()) {MultipartFile file = entry.getValue();inputStream = file.getInputStream();File fileDir= new File(UPLOADDIR);if(!fileDir.exists()||!fileDir.isDirectory()){fileDir.mkdir();}File uploadFile= new File(UPLOADDIR+"/"+System.currentTimeMillis()+file.getOriginalFilename());if(uploadFile.exists()){uploadFile.delete();}uploadFile.createNewFile();outputStream =new FileOutputStream(uploadFile);byte[] bs = new byte[1024];int len=0;while ((len=inputStream.read(bs))>0) {outputStream.write(bs);}System.out.println(file.getOriginalFilename()+"上传成功");}response.getWriter().print("全部上传成功");} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();}finally{try {if(inputStream!=null){inputStream.close();}if(outputStream!=null){outputStream.close();}} catch (Exception e) {// TODO: handle exception}}}}
附上：
附件列表