plupload插件使用

plupload这个插件可实现拖拽文件到指定区域就可上传的功能

使用步骤如下：

第一步：导入js，css。

第二步：写一个html页面，定义一个id，然后ajax提交

第三步：写后台代码，复制文件，保存复制文件后的文件路径

代码如下：

html：

#set($layout = "partner/shared/layout.vm")
#set($css="
	<link rel='stylesheet' type='text/css' href='/system/scripts/plupload/jquery.plupload.queue/css/<span style="background-color: rgb(255, 255, 102);">jquery.plupload.queue.css</span>'> 
")
#set($js="
<script type='text/javascript' src='/system/scripts/plupload/<span style="background-color: rgb(255, 255, 102);">plupload.full.min.js</span>'></script>
<script type='text/javascript' src='/system/scripts/plupload/jquery.plupload.queue/<span style="background-color: rgb(255, 255, 102);">jquery.plupload.queue.js</span>'></script>
<script type='text/javascript' src='/system/scripts/plupload/i18n/<span style="background-color: rgb(255, 255, 102);">zh_CN.js</span>'></script>
")
<style type="text/css">
.plupload_scroll .plupload_filelist {
	height: 80px;
	background: #F5F5F5;
	overflow-y: hidden;
}
</style>

<script type="text/javascript">
$(function () {
	  
      $("#uploader").pluploadQueue({   
           // General settings   
           runtimes : 'html5,gears,browserplus,silverlight,flash,html4',   
           url : <span style="background-color: rgb(255, 255, 102);">'/system/sellers/product/test.shtml</span>',   
           max_file_size : '20mb',   
           unique_names: true,   
           chunk_size: '2mb',   
           // Specify what files to browse for   
           filters : [   
               {title: "voice files", extensions: "jpg"},   
               {title: "Zip files", extensions: "zip"}   
           ], 
           // Flash settings   
           flash_swf_url: '/system/scripts/plupload/Moxie.swf',   
           // Silverlight settings   
           silverlight_xap_url: '/system/scripts/plupload/Moxie.xap',  
           // 参数   
           multipart_params: {'bookId': '$!bookId'},  
           multi_selection:false,
         
     });
      
     $("#uploader").pluploadQueue().bind("UploadComplete", function(up, files) {
    	 jAlert("上传成功", "消息提醒",function(){
    		 window.location.reload();//刷新当前页面.
    	 });    	 
     });   
     
     $("#uploader").pluploadQueue().bind("FilesAdded", function(up, files) {//单一上传，如果不需要直接删除这个方法
    	 $.each(up.files, function (i, file) {
   	        if (up.files.length <= 1) {
   	            return;
   	        }
   	        up.removeFile(file);
   	    });
  	 });  
})
</script>
#set($path=$global.resServer)
<div class="container">
     <div class="row">
          <div class="col-md-12">
               <div class="widget wgreen">
                    <div class="widget-head">
                         <div class="pull-left">视频</div>
                         <div class="widget-icons pull-right">
                         	  <a href="/system/sellers/product/picture_books.shtml#msellers_#picturebook" class="btn btn-info">返回</a>
                         	        
                              <a href="#" class="wminimize"><i class="icon-chevron-up"></i></a>
                         </div>
                         <div class="clearfix"></div>
                    </div>
                    <div class="widget-content">
                         <div class="padd">
                              <!-- Form starts.  -->
                              <form class="form-horizontal" method="post" action="/system/product/edit.shtml" name="product_validate"
                                   id="product_validate" novalidate="novalidate" enctype="multipart/form-data">
                                   <input type="hidden" id="id" name="id" value="$!model.id" />
                                   
                                   <hr>
                                   <div class="form-group">
                                        <label class="col-lg-4 control-label" style="padding:0px 2px;">上传</label>
                                        <div class="col-lg-4">
                                             <div id="<span style="background-color: rgb(255, 255, 51);">uploader</span>" >
						   					 </div>
                                        </div>
                                   </div>
                                   <hr>
                              </form>
                         </div>
                    </div>
               </div>
          </div>
     </div>
</div>

action

@FireAuthority(authorityTypes = AuthorityType.SYSTEM)
	@RequestMapping(value = "/test", method = RequestMethod.POST)
	public @ResponseBody String test(){
		long bookId = getFormForLong("bookId", 0);
		MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
		MultipartFile file = multipartRequest.getFile("file");
		String path = "";
		SellersProductPO sp = sellersProductService.getById(bookId);
		if (file != null &&file.getSize() > 0) {
			try {
				if(sp.getAudiobook()!=null){
					storageService.delete(sp.getAudiobook());
				}
				String fileName = FileNameUtil.generateFileName();
				path = storageService.update("audiobook/", fileName + ".jpg", file.getInputStream());
				sp.setAudiobook(path);//把路径放入对象中	
			} catch (IOException e) {
				e.printStackTrace();
			}
		}
		sellersProductService.edit(sp);//保存对象
		return SUCCESS;
	}

storageservice：

@Override
	public String update(String pathPrefix, String fileName, InputStream dataInputStream) throws IOException {
		byte[] streamArray = IOUtils.readStreamAsBytesArray(dataInputStream);
		long contentLength = streamArray.length;
		InputStream streamForFull = new ByteArrayInputStream(streamArray);
		String path = putObject(pathPrefix + fileName, streamForFull, contentLength);
		streamForFull.close();
		return path;
	}

这个工具可以指定各个文件的类型和上传单个或多个。