微客导航 » 文章资讯 » webuploader在springMVC+jquery+Java开发环境下的大文件分片上传的实例代码

webuploader在springMVC+jquery+Java开发环境下的大文件分片上传的实例代码

2024-02-25 12:29:07 284

注意:

1,webuploader上传组件会和jQuery自带的上传组件冲突,所以不要使用

标签中添加上传文件的属性;

enctype="multipart/form-data"

2.并且屏蔽ApplicationContext-mvc.xml里面的拦截配置!

下面正式开始前后台代码开发:

1.在页面jsp文件中,调用webuploader组件的公共文件

页面上的控件代码:

因为我用的是自动上传,所以注释了上传按钮,upload3.js里也注释了相对的上传按钮的点击方法.

2.真正的上传组件代码是upload3.js,里面介绍了webuploader的初始化,分片,各种参数,具体可以参考官网上的API

/*********************************WebUpload单文件上传begin*****************************************/
$(function(){
var$list=$("#thelist");
varuploader;//实例化
uploader=WebUploader.create({
auto:true,//是否自动上传
pick:{
id:'#attach',
name:"multiFile",//这个地方name没什么用，和fileVal配合使用。
label:'点击选择文件,会自动上传',
multiple:false//默认为true，true表示可以多选文件，HTML5的属性
},
swf:'../Uploader.swf',//在这里必需要引入swf文件，webuploader初始化要用
fileVal:'multiFile',//提交到到后台，是要用"multiFile"这个名称属性来取文件的
server:"myPractice/webUploader.do",
duplicate:true,//是否可重复选择同一文件
resize:false,
chunked:true,//分片处理
chunkSize:20*1024*1024,//每片20M
chunkRetry:2,//如果失败，则不重试
threads:1,//上传并发数。允许同时最大上传进程数。
fileNumLimit:1,//上传的文件总数
//禁掉全局的拖拽功能。
disableGlobalDnd:true
});
//当有文件添加进来的时候
uploader.on("fileQueued",function(file){
console.log("fileQueued:");
$list.append(""+
""+file.name+""+
"正在上传..."+
"

"); }); //当所有文件上传结束时触发 uploader.on("uploadFinished",function(){ console.log("uploadFinished:"); }) //当文件上传成功时触发。 uploader.on("uploadSuccess",function(file,response){ //alert(file.name); $("#"+file.id).find("p.state").text("已上传"); }); uploader.on("uploadError",function(file){ $("#"+file.id).find("p.state").text("上传出错"); uploader.cancelFile(file); uploader.removeFile(file,true); uploader.reset(); }); //如果是手动上传,用下面的事件,并启用jsp页面上的上传按钮 //$("#upload").on("click",function(){ //uploader.upload(); //}) }); /*********************************WebUpload单文件上传end*******************************************/

3.前台完毕之后,需要找到后台Java代码,实现上传到服务器的功能,webuploader组件中server属性就是指向服务端代码:

@Controller
@RequestMapping(value="/myPractice")//这里就是表明上传组件怎么通过server属性找到后端代码的,不要太在意细节
publicclassMyPracticeControllerextendsBaseController{

@RequestMapping(method={RequestMethod.POST},value={"/webUploader"})
@ResponseBody
publicvoidwebUploader(HttpServletRequestrequest,HttpServletResponseresponse)throwsException{
try{
booleanisMultipart=ServletFileUpload.isMultipartContent(request);
if(isMultipart){
FileItemFactoryfactory=newDiskFileItemFactory();
ServletFileUploadupload=newServletFileUpload(factory);
//得到所有的表单域，它们目前都被当作FileItem
ListfileItems=upload.parseRequest(request);
Stringid="";
StringfileName="";
//如果大于1说明是分片处理
intchunks=1;
intchunk=0;
FileItemtempFileItem=null;
for(FileItemfileItem:fileItems){
if(fileItem.getFieldName().equals("id")){
id=fileItem.getString();
}elseif(fileItem.getFieldName().equals("name")){
fileName=newString(fileItem.getString().getBytes("ISO-8859-1"),"UTF-8");
}elseif(fileItem.getFieldName().equals("chunks")){
chunks=NumberUtils.toInt(fileItem.getString());
}elseif(fileItem.getFieldName().equals("chunk")){
chunk=NumberUtils.toInt(fileItem.getString());
}elseif(fileItem.getFieldName().equals("multiFile")){
tempFileItem=fileItem;
}
}
//session中的参数设置获取是我自己的原因,文件名你们可以直接使用fileName,这个是原来的文件名
StringfileSysName=this.getRequest().getSession().getAttribute("fileSysName").toString();
Stringrealname=fileSysName+fileName.substring(fileName.lastIndexOf("."));//转化后的文件名
this.getRequest().getSession().setAttribute("realname",realname);
StringfilePath=Const.VIDEOPATHFILE+"sound/";//文件上传路径
//临时目录用来存放所有分片文件
StringtempFileDir=filePath+id;
FileparentFileDir=newFile(tempFileDir);
if(!parentFileDir.exists()){
parentFileDir.mkdirs();
}
//分片处理时，前台会多次调用上传接口，每次都会上传文件的一部分到后台
FiletempPartFile=newFile(parentFileDir,realname+"_"+chunk+".part");
FileUtils.copyInputStreamToFile(tempFileItem.getInputStream(),tempPartFile);
//是否全部上传完成
//所有分片都存在才说明整个文件上传完成
booleanuploadDone=true;
for(inti=0;i
到这里基本完了,webuploader前后台设计的代码就这些,
Uploader.swf 


webuploader.min.js
webuploader.js

webuploader.css这4个公共文件从官网可以下载,都一样. 最后,文件上传后页面样式是

以上所述是小编给大家介绍的webuploader在springMVC+jquery+Java开发环境下的大文件分片上传的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

返回顶部
3162201930
czq8825@qq.com

webuploader在springMVC+jquery+Java开发环境下的大文件分片上传的实例代码

热门推荐

随机推荐