js上传控件 plupload 使用记录

2023-01-07 22:02:11

最近一个项目需要使用一个上传控件进行多图片上传，给用户更好的体验，找到了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 settings  
        runtimes : 'html5,flash,silverlight,html4,html',  
        url : "file/upload",  
   
        // Maximum file size  
        max_file_size : '20mb',  
   
        chunk_size: '10mb',  
   
        // Resize images on clientside if we can  
        resize : {  
            width : 1000,  
            height : 1000,  
            quality : 90,  
            crop: true // crop to exact dimensions  
        },  
   
        // Specify what files to browse for  
        filters : [  
            {title : "Image files", extensions : "jpg,gif,png"},  
            {title : "Zip files", extensions : "zip,avi"}  
        ],  
   
        // Rename files by clicking on their titles  
        rename: true,  
           
        // Sort files  
        sortable: true,  
   
        // Enable ability to drag'n'drop files onto the widget (currently only HTML5 supports that)  
        dragdrop: true,  
   
        // Views to activate  
        views: {  
            list: true,  
            thumbs: true, // Show thumbs  
            active: 'thumbs'  
        },  
   
        // Flash settings  
        flash_swf_url : 'js/Moxie.swf',  
       
        // Silverlight settings  
        silverlight_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 block  
            e.printStackTrace();  
        }finally{  
            try {  
                if(inputStream!=null){  
                    inputStream.close();  
                }  
                if(outputStream!=null){  
                    outputStream.close();  
                }  
            } catch (Exception e) {  
                // TODO: handle exception  
            }  
          
        }  
    }  
}

至此，大功告成！

附上：

码农公寓

js上传控件 plupload 使用记录

附件列表

码农公寓

附件列表

相关文章