zoukankan      html  css  js  c++  java

  • js上传控件 plupload 使用记录

    最近一个项目需要使用一个上传控件进行多图片上传，给用户更好的体验，找到了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. }  




    至此，大功告成！


    附上：

    plupload-2.1.2.zip

    附件列表
    • 相关阅读:
      Spring整合SpringDataJpa配置文件头
      SpringDataJpa全部依赖
      Spring data jpa persistence .xml 配置文件
      最新为Phpstorm配置xdebug 进行断点调试
      如何根据不同的浏览器写不同的css样式达到兼容
      关于ecshop的那些故事
      安装xampp 后 发现 apache 启动不起来
      关于在biweb 中安装完成后 首页上方报错问题的解决
      phpstormn 中 xdebug 的详细配置2
      关于phpstorm中安装配置xdeug
    • 原文地址：https://www.cnblogs.com/signheart/p/6598125.html
    Copyright © 2011-2022 走看看