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

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

2024-02-26 13:53:02 52

之前自己写小项目的时候也碰到过文件上传的问题，没有找到很好的解决方案。虽然之前网找各种解决方案的时候也看到过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 小空间大浴望 卫浴间装修巧支招  
                     
            
            
                
                
                
            
        
        
        
            
                随机推荐
                
                                            
                            VC++中HTControl的CHTButton按钮控件类用法实例解析
                        
                                            
                            VC++角色游戏中的人物初始化模块代码实例
                        
                                            
                            PowerShell中把IP转换为长整形数字的方法
                        
                                            
                            PowerShell读取文件内容、替换文件内容、读取限定行的例子
                        
                                            
                            javascript实现的平方米、亩、公顷单位换算小程序
                        
                                            
                            js中window.open打开一个新的页面
                        
                                            
                            点击标签切换和自动切换DIV选项卡
                        
                                            
                            Python def函数的定义、使用及参数传递实现代码
                        
                                            
                            SQLSERVER 清除历史记录的方法
                        
                                            
                            DB2 数据库创建、表的ixf文件导出导入示例
                        
                                            
                            JavaScript动态改变HTML页面元素例如添加或删除
                        
                                            
                            数据库分页查询语句数据库查询
                        
                                            
                            C++ Vector用法深入剖析
                        
                                            
                            window.location.href的用法(动态输出跳转)
                        
                                            
                            Python入门及进阶笔记 Python 内置函数小结
                        
                                            
                            Python-基础-入门 简介
                        
                                    
            
            

                 
                
                
            
        
    



    
        
        返回顶部
    
    
        
            
            514930285
        
    
    
        
            
            czq8825@qq.com
        
    




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