微客导航 » 文章资讯 » Java与WebUploader相结合实现文件上传功能(实例代码)

Java与WebUploader相结合实现文件上传功能(实例代码)

2024-02-26 13:53:02 323

之前自己写小项目的时候也碰到过文件上传的问题，没有找到很好的解决方案。虽然之前网找各种解决方案的时候也看到过WebUploader，但没有进一步深究。这次稍微深入了解了些，这里也做个小结。

简单的文件和普通数据上传并保存

jsp页面：

<%@pagelanguage="java"contentType="text/html;charset=UTF-8"
pageEncoding="UTF-8"%>




Inserttitlehere



文件：

信息：

servlet：

packagecom.yihengliu.web.action;
importjava.io.File;
importjava.io.IOException;
importjava.io.InputStream;
importjava.util.List;
importjavax.servlet.ServletException;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
importorg.apache.commons.fileupload.FileItem;
importorg.apache.commons.fileupload.disk.DiskFileItemFactory;
importorg.apache.commons.fileupload.servlet.ServletFileUpload;
importorg.apache.commons.io.FileUtils;
/**
*Servletusertoacceptfileupload
*/
publicclassFileUploadServletextendsHttpServlet{
privatestaticfinallongserialVersionUID=1L;
privateStringserverPath="e:/";
protectedvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)
throwsServletException,IOException{
response.getWriter().append("Servedat:").append(request.getContextPath());
System.out.println("进入后台...");
//1.创建DiskFileItemFactory对象，配置缓存用
DiskFileItemFactorydiskFileItemFactory=newDiskFileItemFactory();
//2.创建ServletFileUpload对象
ServletFileUploadservletFileUpload=newServletFileUpload(diskFileItemFactory);
//3.设置文件名称编码
servletFileUpload.setHeaderEncoding("utf-8");
//4.开始解析文件
try{
Listitems=servletFileUpload.parseRequest(request);
for(FileItemfileItem:items){
if(fileItem.isFormField()){//>>普通数据
Stringinfo=fileItem.getString("utf-8");
System.out.println("info:"+info);
}else{//>>文件
//1.获取文件名称
Stringname=fileItem.getName();
//2.获取文件的实际内容
InputStreamis=fileItem.getInputStream();
//3.保存文件
FileUtils.copyInputStreamToFile(is,newFile(serverPath+"/"+name));
}
}
}catch(Exceptione){
e.printStackTrace();
}
}
protectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)
throwsServletException,IOException{
doGet(request,response);
}
}

使用WebUploader组件上传

分片、并发，预览、压缩，多途径添加文件夹（文件多选，拖拽等），妙传

页面样式使用


使用webuploader上传








文件上传

varuploader=WebUploader.create( { swf:"${pageContext.request.contextPath}/js/Uploader.swf", server:"${pageContext.request.contextPath}/FileUploadServlet", pick:"#filePicker", auto:true } );

生成文件名列表、实时显示上传进度、显示缩略图
增加文件列表div,

生成缩略图和显示上传进度

//生成缩略图和上传进度
uploader.on("fileQueued",function(file){
//把文件信息追加到fileList的div中
$("#fileList").append(""+file.name+"

") //制作缩略图 //error：不是图片，则有error //src:代表生成缩略图的地址 uploader.makeThumb(file,function(error,src){ if(error){ $("#"+file.id).find("img").replaceWith("无法预览 "); }else{ $("#"+file.id).find("img").attr("src",src); } }); } ); //监控上传进度 //percentage:代表上传文件的百分比 uploader.on("uploadProgress",function(file,percentage){ $("#"+file.id).find("span.percentage").text(Math.round(percentage*100)+"%"); });

拖拽上传、粘贴上传
创建拖拽区域并设置样式：


#dndArea{
width:200px;
height:100px;
border-color:red;
border-style:dashed;
}

基本配置中增加dnd区域配置(开启拖拽)

屏蔽拖拽区域外的响应

开启粘贴功能

varuploader=WebUploader.create(
{swf:"${pageContext.request.contextPath}/js/Uploader.swf",
server:"${pageContext.request.contextPath}/FileUploadServlet",
pick:"#filePicker",
auto:true,
//开启拖拽
dnd:"#dndArea",
//屏蔽拖拽区域外的响应
disableGlobalDnd:true,
//
}
);

文件的分块上传

前端根据需要发送的文件生成一个md5字符串发送给后台，后台创建以该md5字符串命名的文件夹。前端分块发送文件并发送文件块序号给后台，后台接收到文件后按序号名称保存。前端发送完成后通知后台合并文件。

前端配置，开启是否分块、分块大小、线程个数等

//上传基本配置
varuploader=WebUploader.create(
{
swf:"${pageContext.request.contextPath}/js/Uploader.swf",
server:"${pageContext.request.contextPath}/FileUploadServlet",
pick:"#filePicker",
auto:true,
dnd:"#dndArea",
disableGlobalDnd:true,
paste:"#uploader",

//分块上传设置
//是否分块
chunked:true,
//每块文件大小（默认5M）
chunkSize:5*1024*1024,
//开启几个并非线程（默认3个）
threads:3,
//在上传当前文件时，准备好下一个文件
prepareNextFile:true
}
);

前端监听分块

可以分为三个时间点：

before-send-file:该方法在文件上传前调用（只会在一个文件上传前调用）。

可以在该方法中获取文件的md5字符串作为后台保存分块文件的目录名

before-send:该方法在每个分块文件上传前调用（每个分块上传前都会调用）。

可以在该方法中发送md5字符串到后台，后台判断是否已经存在分块决定是否发送以达到断点续传的功能

after-send-file:该方法在所有文件上传完成没有错误之后调用（所有分块上传完成后调用）。

可以在该方法中通知后台合并所有分块

前端获取文件md5字符串，发送每个分块时发送到后台，后台接收如果不存在文件夹创建文件夹，保存分块发送的文件

//监听分块上传的时间点，断点续传
varfileMd5;
WebUploader.Uploader.register({
"before-send-file":"beforeSendFile",
"before-send":"beforeSend",
"after-send-file":"afterSendFile"
},{
beforeSendFile:function(file){
//创建一个deffered,用于通知是否完成操作
vardeferred=WebUploader.Deferred();
//计算文件的唯一标识，用于断点续传和妙传
(newWebUploader.Uploader()).md5File(file,0,5*1024*1024)
.progress(function(percentage){
$("#"+file.id).find("span.state").text("正在获取文件信息...");
})
.then(function(val){
fileMd5=val;
$("#"+file.id).find("span.state").text("成功获取文件信息");
//放行
deferred.resolve();
});
//通知完成操作
returndeferred.promise();
},
beforeSend:function(){
vardeferred=WebUploader.Deferred();
//发送文件md5字符串到后台
this.owner.options.formData.fileMd5=fileMd5;
deferred.resolve();
returndeferred.promise();
},
afterSendFile:function(){
}
}
);

添加state标签

$("#fileList").append(""+file.name+"
");

保存文件

//4.开始解析文件
//文件md5获取的字符串
StringfileMd5=null;
//文件的索引
Stringchunk=null;
try{
Listitems=servletFileUpload.parseRequest(request);
for(FileItemfileItem:items){
if(fileItem.isFormField()){//>>普通数据
StringfieldName=fileItem.getFieldName();
if("info".equals(fieldName)){
Stringinfo=fileItem.getString("utf-8");
System.out.println("info:"+info);
}
if("fileMd5".equals(fieldName)){
fileMd5=fileItem.getString("utf-8");
System.out.println("fileMd5:"+fileMd5);
}
if("chunk".equals(fieldName)){
chunk=fileItem.getString("utf-8");
System.out.println("chunk:"+chunk);
}
}else{//>>文件
/*//1.获取文件名称
Stringname=fileItem.getName();
//2.获取文件的实际内容
InputStreamis=fileItem.getInputStream();
//3.保存文件
FileUtils.copyInputStreamToFile(is,newFile(serverPath+"/"+name));*/
//如果文件夹没有创建文件夹
Filefile=newFile(serverPath+"/"+fileMd5);
if(!file.exists()){
file.mkdirs();
}
//保存文件
FilechunkFile=newFile(serverPath+"/"+fileMd5+"/"+chunk);
FileUtils.copyInputStreamToFile(fileItem.getInputStream(),chunkFile);
}
}

前端通知action进行合并文件

前端增加：

//通知合并分块
$.ajax(
{
type:"POST",
url:"${pageContext.request.contextPath}/UploadActionServlet?action=mergeChunks",
data:{
fileMd5:fileMd5
},
success:function(response){
}
}
);

新增合并action:

packagecom.yihengliu.web.action;
importjava.io.File;
importjava.io.FileFilter;
importjava.io.FileInputStream;
importjava.io.FileOutputStream;
importjava.io.IOException;
importjava.nio.channels.FileChannel;
importjava.util.ArrayList;
importjava.util.Arrays;
importjava.util.Collections;
importjava.util.Comparator;
importjava.util.List;
importjava.util.UUID;
importjavax.servlet.ServletException;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
/**
*合并上传文件
*/
publicclassUploadActionServletextendsHttpServlet{
privatestaticfinallongserialVersionUID=1L;
privateStringserverPath="e:/";
protectedvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)
throwsServletException,IOException{
System.out.println("进入合并后台...");
Stringaction=request.getParameter("action");
if("mergeChunks".equals(action)){
//获得需要合并的目录
StringfileMd5=request.getParameter("fileMd5");
//读取目录所有文件
Filef=newFile(serverPath+"/"+fileMd5);
File[]fileArray=f.listFiles(newFileFilter(){
//排除目录，只要文件
@Override
publicbooleanaccept(Filepathname){
if(pathname.isDirectory()){
returnfalse;
}
returntrue;
}
});
//转成集合，便于排序
ListfileList=newArrayList(Arrays.asList(fileArray));
//从小到大排序
Collections.sort(fileList,newComparator(){
@Override
publicintcompare(Fileo1,Fileo2){
if(Integer.parseInt(o1.getName())

断点续传

前端页面发送前添加校验，校验是否已经上传分块
beforeSend:function(block){
vardeferred=WebUploader.Deferred();
//支持断点续传，发送到后台判断是否已经上传过
$.ajax(
{
type:"POST",
url:"${pageContext.request.contextPath}/UploadActionServlet?action=checkChunk",
data:{
//文件唯一表示
fileMd5:fileMd5,
//当前分块下标
chunk:block.chunk,
//当前分块大小
chunkSize:block.end-block.start
},
dataType:"json",
success:function(response){
if(response.ifExist){
//分块存在，跳过该分块
deferred.reject();
}else{
//分块不存在或不完整，重新发送
deferred.resolve();
}
}
}
);
//发送文件md5字符串到后台
this.owner.options.formData.fileMd5=fileMd5;
returndeferred.promise();
}

action中添加校验

elseif("checkChunk".equals(action)){
//校验文件是否已经上传并返回结果给前端
//文件唯一表示
StringfileMd5=request.getParameter("fileMd5");
//当前分块下标
Stringchunk=request.getParameter("chunk");
//当前分块大小
StringchunkSize=request.getParameter("chunkSize");
//找到分块文件
FilecheckFile=newFile(serverPath+"/"+fileMd5+"/"+chunk);
//检查文件是否存在，且大小一致
response.setContentType("text/html;charset=utf-8");
if(checkFile.exists()&&checkFile.length()==Integer.parseInt((chunkSize))){
response.getWriter().write("{\"ifExist\":1}");
}else{
response.getWriter().write("{\"ifExist\":0}");
}
}
以上所述是小编给大家介绍的Java与WebUploader相结合实现文件上传功能(实例代码)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
                
            
              
            
                                    上一篇
Docker容器中运行nginx
                
                                    下一篇
ASP.NET数据库操作类实例
                            
            
            
                     
                热门推荐 
                                        1 毛坯房验收经验和常识 看了之后再验房心里有底  
                                        2 二手房收房如何交接 二手房收房注意问题  
                                        3 专业验收毛坯房的价格 商品房验收合格的标准  
                                        4 精装房怎么验收 精装房请验房师有用吗  
                                        5 一般要到哪里找验房师 验房师有哪些作用呢  
                                        6 请人验房一般是多少钱 验房师费用是多少  
                                        7 怎样测量房子面积 建筑面积和使用面积怎么算  
                                        8 收房需要注意什么 仔细检查不松懈  
                                        9 收房时三书一证一表是什么 主要作用介绍  
                                        10 交房时交房税费有哪些 本文为你一一讲解  
                                        11 验房都需要验什么 要做哪些准备呢  
                                        12 毛坯房验房师有必要请吗 毛坯房装修完如何验收  
                                        13 地下室防水工程质量验收规范详解  
                                        14 水性涂料、油性涂料区别介绍  
                                        15 零基础布艺DIY工坊 教你做超萌猫头鹰钥匙包  
                                        16 三棵树漆怎么样？三棵树漆官方网站  
                                        17 家庭“装修套餐”中猫腻你知道吗？  
                                        18 小空间大浴望 卫浴间装修巧支招  
                     
            
            
                
                
                
            
        
        
        
            
                随机推荐
                
                                            
                            评论小品祝福语大全简短
                        
                                            
                            幼儿祝福语押韵的话简短
                        
                                            
                            小住户的祝福语简短
                        
                                            
                            加盟的祝福语大全简短
                        
                                            
                            大外甥高考祝福语简短
                        
                                            
                            体育学校开业祝福语简短
                        
                                            
                            虎年群友祝福语大全简短
                        
                                            
                            寿宴文案短句祝福语简短
                        
                                            
                            儿子调剂上岸祝福语简短
                        
                                            
                            跨年酒场祝福语大全简短
                        
                                            
                            拜年优美祝福语大全简短
                        
                                            
                            月底晚安祝福语大全简短
                        
                                            
                            虎年祝福语台词简短英语
                        
                                            
                            中秋晚会文案祝福语简短
                        
                                            
                            康复走路祝福语简短句
                        
                                            
                            乔迁换新仪式祝福语简短
                        
                                    
            
            

                 
                
                
            
        
    



    
        
        返回顶部
    
    
        
            
            3162201930
        
    
    
        
            
            czq8825@qq.com
        
    




    免责声明：网站资源来源于网络，如有侵权，请及时联系删除。
    Copyright © 2026 微客导航网. All Rights Reserved.
    
        蜀ICP备2021004611号-4
        网站地图