最近发现一个非常牛的上传组件，前端根据浏览器不同选择使用Html5、 Gears, Silverlight, Flash, BrowserPlus来对文件进行客户端优化，比如大图片的压缩，大文件分块上传，简直是太牛了，还有上传进度条、多文件上传等。官方网 站：http://plupload.com/，下载的domo是php版本的，于是我弄了个java版本的，分享给大家，
前端js等文件去下载个domo就有了，后端使用到了commons-fileupload-1.2.2.jar这个包。
前端html：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>plupload</title>
<!-- 配置界面上的css -->
<link rel="stylesheet" type="text/css" href="plupload/jquery.plupload.queue/css/jquery.plupload.queue.css">
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="plupload/plupload.full.js"></script>
<script type="text/javascript" src="plupload/jquery.plupload.queue/jquery.plupload.queue.js"></script>
<!-- 国际化中文支持 -->
<script type="text/javascript" src="plupload/i18n/cn.js"></script>
<script type="text/javascript">
/* Convert divs to queue widgets when the DOM is ready */
$(function(){
function plupload(){
$("#uploader").pluploadQueue({
// General settings
runtimes : 'html5,gears,browserplus,silverlight,flash,html4',
url : 'servlet/fileUpload',
max_file_size : '10mb',
unique_names: true,
chunk_size: '2mb',
// Specify what files to browse for
filters : [
{title: "Image files", extensions: "jpg,gif,png"},
{title: "Zip files", extensions: "zip"}
],
resize: {width: 640, height: 480, quality: 90},
// Flash settings
flash_swf_url: 'plupload/plupload.flash.swf',
// Silverlight settings
silverlight_xap_url: 'plupload/plupload.silverlight.xap',
// 参数
multipart_params: {'user': 'Rocky', 'time': '2012-06-12'}
});
}
plupload();
$('#Reload').click(function(){
plupload();
});
});
</script>
<div style="width:750px; margin:0 auto">
<form id="formId" action="Submit.action" method="post">
<div id="uploader">
<p>您的浏览器未安装 Flash, Silverlight, Gears, BrowserPlus 或者支持 HTML5 .</p>
</div>
<input value="重新上传" id="Reload" type="button">
</form>
</div>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>plupload</title>
<!-- 配置界面上的css -->
<link rel="stylesheet" type="text/css" href="plupload/jquery.plupload.queue/css/jquery.plupload.queue.css">
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="plupload/plupload.full.js"></script>
<script type="text/javascript" src="plupload/jquery.plupload.queue/jquery.plupload.queue.js"></script>
<!-- 国际化中文支持 -->
<script type="text/javascript" src="plupload/i18n/cn.js"></script>
<script type="text/javascript">
/* Convert divs to queue widgets when the DOM is ready */
$(function(){
function plupload(){
$("#uploader").pluploadQueue({
// General settings
runtimes : 'html5,gears,browserplus,silverlight,flash,html4',
url : 'servlet/fileUpload',
max_file_size : '10mb',
unique_names: true,
chunk_size: '2mb',
// Specify what files to browse for
filters : [
{title: "Image files", extensions: "jpg,gif,png"},
{title: "Zip files", extensions: "zip"}
],
resize: {width: 640, height: 480, quality: 90},
// Flash settings
flash_swf_url: 'plupload/plupload.flash.swf',
// Silverlight settings
silverlight_xap_url: 'plupload/plupload.silverlight.xap',
// 参数
multipart_params: {'user': 'Rocky', 'time': '2012-06-12'}
});
}
plupload();
$('#Reload').click(function(){
plupload();
});
});
</script>
<div style="width:750px; margin:0 auto">
<form id="formId" action="Submit.action" method="post">
<div id="uploader">
<p>您的浏览器未安装 Flash, Silverlight, Gears, BrowserPlus 或者支持 HTML5 .</p>
</div>
<input value="重新上传" id="Reload" type="button">
</form>
</div>
后端
package com.rock;
import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.fileupload.FileItemIterator;
import org.apache.commons.fileupload.FileItemStream;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.commons.fileupload.util.Streams;
public class FileUploadAction extends HttpServlet {
private static final long serialVersionUID = 3447685998419256747L;
private static final String RESP_SUCCESS = "{\"jsonrpc\" : \"2.0\", \"result\" : \"success\", \"id\" : \"id\"}";
private static final String RESP_ERROR = "{\"jsonrpc\" : \"2.0\", \"error\" : {\"code\": 101, \"message\": \"Failed to open input stream.\"}, \"id\" : \"id\"}";
public static final String JSON = "application/json";
public static final int BUF_SIZE = 2 * 1024;
public static final String FileDir = "uploadfile/";
private int chunk;
private int chunks;
private String name;
private String user;
private String time;
/**
* Handles an HTTP POST request from Plupload.
*
* @param req The HTTP request
* @param resp The HTTP response
*/
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String responseString = RESP_SUCCESS;
boolean isMultipart = ServletFileUpload.isMultipartContent(req);
if(isMultipart){
ServletFileUpload upload = new ServletFileUpload();
try {
FileItemIterator iter = upload.getItemIterator(req);
while (iter.hasNext()) {
FileItemStream item = iter.next();
InputStream input = item.openStream();
// Handle a form field.
if(item.isFormField()){
String fileName = item.getFieldName();
String value = Streams.asString(input);
if("name".equals(fileName)){
this.name = value;
}else if("chunks".equals(fileName)){
this.chunks = Integer.parseInt(value);
}else if("chunk".equals(fileName)){
this.chunk = Integer.parseInt(value);
}else if("user".equals(fileName)){
this.user = value;
}else if("time".equals(fileName)){
this.time = value;
}
}
// Handle a multi-part MIME encoded file.
else {
String fileDir = req.getSession().getServletContext().getRealPath("/")+FileDir;
File dstFile = new File(fileDir);
if (!dstFile.exists()){
dstFile.mkdirs();
}
File dst = new File(dstFile.getPath()+ "/" + this.name);
saveUploadFile(input, dst);
}
}
}
catch (Exception e) {
responseString = RESP_ERROR;
e.printStackTrace();
}
}
// Not a multi-part MIME request.
else {
responseString = RESP_ERROR;
}
if(this.chunk == this.chunks - 1){
System.out.println("用户："+this.user);
System.out.println("文件名称："+this.name);
System.out.println("上传时间："+this.time);
}
resp.setContentType(JSON);
byte[] responseBytes = responseString.getBytes();
resp.setContentLength(responseBytes.length);
ServletOutputStream output = resp.getOutputStream();
output.write(responseBytes);
output.flush();
}
/**
* Saves the given file item (using the given input stream) to the web server's
* local temp directory.
*
* @param input The input stream to read the file from
* @param dst The dir of upload
*/
private void saveUploadFile(InputStream input, File dst) throws IOException {
OutputStream out = null;
try {
if (dst.exists()) {
out = new BufferedOutputStream(new FileOutputStream(dst, true),
BUF_SIZE);
} else {
out = new BufferedOutputStream(new FileOutputStream(dst),
BUF_SIZE);
}
byte[] buffer = new byte[BUF_SIZE];
int len = 0;
while ((len = input.read(buffer)) > 0) {
out.write(buffer, 0, len);
}
} catch (Exception e) {
e.printStackTrace();
} finally {
if (null != input) {
try {
input.close();
} catch (IOException e) {
e.printStackTrace();
}
}
if (null != out) {
try {
out.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
}
}
分享到：
相关推荐
**plupload上传插件**是一款强大的、跨平台的文件上传组件，它支持多种浏览器和多种技术栈，如Flash、HTML5、Silverlight和Gears，确保在不同环境下都能实现稳定高效的文件上传功能。该插件设计的目标是提供一个统一...
Plupload是有TinyMCE的开发者开发的，为您的内容管理系统或是类似上传程序提供一个高度可用的上传插件。Plupload 目前分为一个核心API 和一个jQuery上传队列部件，这样使你可以直接使用或是自己定制。
本项目着重讲解如何使用Java后端配合Plupload前端插件实现多附件上传，并结合分页技术进行数据展示。Plupload是一个强大的多浏览器文件上传解决方案，它支持Flash、Silverlight、HTML5等多种技术，确保在各种浏览器...
标题中的“plupload+jquery+java多文件上传下载功能”是指使用plupload插件结合jQuery和Java技术，实现一个能够支持多文件上传和下载（包括单个文件直接下载及多个文件打包下载）的功能。这个功能通常应用于需要大量...
《基于Java的plupload上传组件在毕业设计中的应用》 在现代Web开发中，文件上传功能是不可或缺的一部分，尤其在毕业设计项目中，它能够帮助用户上传各种类型的资料，如图片、文档等。"plupload-java-servlet-master...
本篇将详细讲解如何使用`plupload`与Java实现大文件上传。 `plupload`是一个强大的多浏览器文件上传插件，支持多种浏览器和多种上传方式，包括传统的表单提交、IFrame、Flash、Silverlight以及HTML5。它具有断点续...
Plupload是一款强大的多文件上传插件，它支持多种浏览器和平台，包括IE6在内的老旧浏览器。这款插件采用JavaScript编写，同时结合HTML5、Flash、Silverlight和HTML4等多种技术，确保在各种环境下都能实现文件的上传...
1. **Plupload组件**：Plupload提供了一个跨浏览器的上传解决方案，通过Flash、Silverlight、HTML5或Gears插件来实现文件上传。它的核心特性包括多文件选择、预览、进度条、文件大小限制、错误处理等。Plupload的API...
在这个上下文中，这个类可能包含了处理Plupload上传过程中的一些逻辑，比如处理断点续传的状态和数据。 **moxie.js和plupload.js** 这两个JavaScript文件是Plupload的核心组件。`moxie.js`是前面提到的Moxie库，它...
在本示例中，开发者可能已经编写了处理Plupload上传请求的Java代码，包括接收文件、验证文件类型和大小、存储到服务器等步骤。 **5. 文件上传流程** 在Plupload的使用过程中，文件上传通常分为以下步骤： - 用户...
1. **HTML5上传**：Plupload利用HTML5的File API，提供了无插件的文件上传方式。通过拖放、选择文件等交互方式，用户可以方便地上传大文件，并且支持断点续传、多文件并发上传，极大地提高了用户体验。 2. **Flash...
7. **Gradle配置**：在Gradle构建文件中，除了添加Plupload的依赖外，还需要配置相关的插件（如Spring Boot插件），以方便启动应用、打包成可执行JAR或部署到服务器。 总结来说，"springboot+gradle+plupload"项目...
总的来说，uploadify与plupload都是优秀的前端文件上传解决方案，而UploadUtil.java则可能是实现后端处理的关键组件。理解这些工具的工作原理和使用方法，能够帮助你构建出高效、安全的文件上传功能。
`plupload.full.min.js` 文件是 Plupload 的压缩版全功能 JavaScript 文件，集成了所有必要的功能模块，以最小的体积提供完整的上传功能。 Plupload 的主要特点包括： 1. **多浏览器兼容性**：Plupload 设计的目标...
另一个流行的选择是Plupload，它提供了一个灵活的上传界面，支持断点续传和队列管理，增强了用户体验。除此之外，有些插件如Uploadify和Fine Uploader不仅具有基本的上传功能，还集成了图片裁剪、压缩等高级特性，...
一个可以运行的项目，关于大附件上传这块的关键技术，在mysql中创建 upload 数据库，导入sql文件，运行项目，修改 database.java 文件下的数据库密码，就实现了超大附件的分片上传，每个方法的功能都写着注解呢，个...
11. **前端上传库**：在实际项目中，前端可能使用像jQuery Form、Plupload或Vue.js的Axios插件这样的库来处理文件选择、预览和上传过程。 通过上述知识点，我们可以构建出一个功能完备、安全可靠的批量图片上传系统...
- **文件上传组件**：如SWFUpload或Plupload，它们负责实现浏览器端的文件选择和上传功能。 - **服务器端处理**：通常需要编写特定的PHP、ASP.NET或Java脚本来接收上传的文件，进行验证和处理。 - **视频转码服务**...
例如，Plupload是一个著名的JavaScript文件上传插件，它支持多文件选择、拖放上传、进度条显示等功能。使用Plupload时，我们需要在HTML中引入相关脚本和样式文件，配置插件选项，并编写JavaScript代码处理文件上传...
- **Plupload**：支持多种浏览器的上传组件，具有断点续传、队列管理等高级特性。 - **Dropzone.js**：一个简单易用的拖放上传库，支持自定义样式和行为。 - **ng-file-upload**（AngularJS）和`react-dropzone`...