Plupload 是一个Web浏览器上的界面友好的文件上传模块，可显示上传进度、图像自动缩略和上传分块。可同时上传多个文件；
上网找了很多Plupload的DEMO都无法正常使用， 而且Plupload官方的DEMO是基于PHP， 折腾了半天， 写了一个基于JAVA的DEMO；
Plupload支持多种方式上传， 包括，flash上传（解决了不同服务器跨域的问题）， html5方式上传， html4上传， silverlight的方式上传， Plupload的核心是另外一个JS库：
MOXIE， MOXIE提供了Plupload的运行环境， 也可以单独拿出来使用， 代码量（体积）挺大的，MOXIE提供了下面几种上传环境：
Plupload支持分块上传， 支持拖拽上传， 支持图片切块， 支持30多种语言， 而且提供了丰富的API， 因为支持多种方式上传， 可以比较放心的使用这个JS插件；
容器是tomcat， 需要java的spring框架， 需要apache的几个jar包， commons.fileupload等....;
以下代码是处理文件上传的java代码：
package controller;
import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.ResourceBundle;
import java.util.UUID;
import javax.servlet.ServletConfig;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.commons.io.FileUtils;
import org.apache.commons.io.FilenameUtils;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import com.alibaba.fastjson.JSON;
@Controller
public class mainController {
String uploadPath;
private static final ResourceBundle bundle = ResourceBundle.getBundle( "config" );
@RequestMapping(value="uploadFile.do", method=RequestMethod.POST)
public void uploadFile( HttpServletRequest request, HttpServletResponse response ) throws IOException {
response.setCharacterEncoding( "UTF-8" );
Integer chunk = null; /* 分割块数 */
Integer chunks = null; /* 总分割数 */
String tempFileName = null; /* 临时文件名 */
String newFileName = null; /* 最后合并后的新文件名 */
BufferedOutputStream outputStream = null;
/* System.out.println(FileUtils.getTempDirectoryPath()); */
uploadPath = request.getServletContext().getRealPath( bundle.getString( "uploadPath" ) );
File up = new File( uploadPath );
if ( !up.exists() )
{
up.mkdir();
}
if ( ServletFileUpload.isMultipartContent( request ) )
{
try {
DiskFileItemFactory factory = new DiskFileItemFactory();
factory.setSizeThreshold( 1024 );
/* factory.setRepository(new File(repositoryPath));// 设置临时目录 */
ServletFileUpload upload = new ServletFileUpload( factory );
upload.setHeaderEncoding( "UTF-8" );
/* upload.setSizeMax(5 * 1024 * 1024);// 设置附件最大大小，超过这个大小上传会不成功 */
List<FileItem> items = upload.parseRequest( request );
for ( FileItem item : items )
{
if ( item.isFormField() ) /* 是文本域 */
{
if ( item.getFieldName().equals( "name" ) )
{
tempFileName = item.getString();
/* System.out.println("临时文件名：" + tempFileName); */
} else if ( item.getFieldName().equals( "chunk" ) )
{
chunk = Integer.parseInt( item.getString() );
/* System.out.println("当前文件块：" + (chunk + 1)); */
} else if ( item.getFieldName().equals( "chunks" ) )
{
chunks = Integer.parseInt( item.getString() );
/* System.out.println("文件总分块：" + chunks); */
}
} else { /* 如果是文件类型 */
if ( tempFileName != null )
{
String chunkName = tempFileName;
if ( chunk != null )
{
chunkName = chunk + "_" + tempFileName;
}
File savedFile = new File( uploadPath, chunkName );
item.write( savedFile );
}
}
}
newFileName = UUID.randomUUID().toString().replace( "-", "" )
.concat( "." )
.concat( FilenameUtils.getExtension( tempFileName ) );
if ( chunk != null && chunk + 1 == chunks )
{
outputStream = new BufferedOutputStream(
new FileOutputStream( new File( uploadPath, newFileName ) ) );
/* 遍历文件合并 */
for ( int i = 0; i < chunks; i++ )
{
File tempFile = new File( uploadPath, i + "_" + tempFileName );
byte[] bytes = FileUtils.readFileToByteArray( tempFile );
outputStream.write( bytes );
outputStream.flush();
tempFile.delete();
}
outputStream.flush();
}
Map<String, Object> m = new HashMap<String, Object>();
m.put( "status", true );
m.put( "fileUrl", bundle.getString( "uploadPath" ) + "/"
+ newFileName );
response.getWriter().write( JSON.toJSONString( m ) );
} catch ( FileUploadException e ) {
e.printStackTrace();
Map<String, Object> m = new HashMap<String, Object>();
m.put( "status", false );
response.getWriter().write( JSON.toJSONString( m ) );
} catch ( Exception e ) {
e.printStackTrace();
Map<String, Object> m = new HashMap<String, Object>();
m.put( "status", false );
response.getWriter().write( JSON.toJSONString( m ) );
} finally {
try {
if ( outputStream != null )
outputStream.close();
} catch ( IOException e ) {
e.printStackTrace();
}
}
}
}
public void main() {
}
}
前端界面的主要代码：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>plupload示例</title>
<script src="http://cdn.bootcss.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/plupload.full.min.js"></script>
</head>
<body>
<div id="filelist">
</div>
<button id="uploader">选择文件</button>
<div id="progress"></div>
<div id="result"></div>
</body>
<script type="text/javascript">
var uploader = new plupload.Uploader({
runtimes : ‘html5,flash,silverlight‘,//设置运行环境，会按设置的顺序，可以选择的值有html5,gears,flash,silverlight,browserplus,html
flash_swf_url : ‘./js/Moxie.swf‘,
silverlight_xap_url : ‘./js/Moxie.xap‘,
url : ‘${pageContext.request.contextPath}/uploadFile.do‘,//上传文件路径
max_file_size : ‘3gb‘,//100b, 10kb, 10mb, 1gb
chunk_size : ‘1mb‘,//分块大小，小于这个大小的不分块
unique_names : true,//生成唯一文件名
browse_button : ‘uploader‘,
filters : [ {
title : ‘Image files‘,
extensions : ‘jpg,gif,png‘
}, {
title : ‘Zip files‘,
extensions : ‘zip,7z,rar‘
} ],
init : {
FilesAdded: function(up, files) {
uploader.start();
return false;
},
FileUploaded : function(up, file, info) {//文件上传完毕触发
console.log("单独文件上传完毕");
var response = $.parseJSON(info.response);
if (response.status) {
$(‘#result‘).append( $(‘<div> "文件路径是："‘ + response.fileUrl + ‘"随机的文件名字为："‘ + file.name + ‘</div>‘) );
}
},
UploadComplete : function( uploader,files ) {
console.log("所有文件上传完毕");
},
UploadProgress : function( uploader,file ) {
$("#progress").html("上传进度为：" + file.percent + "%");
console.log( file.percent );
}
}
});
uploader.init();
</script>
</html>
整体界面如下：
时间： 2024-10-12 22:14:55