我要评论注意:
1,webuploader上传组件会和jquery自带的上传组件冲突,所以不要使用<form>标签中添加上传文件的属性;
enctype="multipart/form-data"
2.并且屏蔽applicationcontext-mvc.xml里面的拦截配置!
<!-- 上传拦截，如最大上传值及最小上传值 -->
<!--新增加的webuploader上传组件,必须要屏蔽这里的拦截机制
<bean id="multipartresolver" class="org.springframework.web.multipart.commons.commonsmultipartresolver" >
<property name="maxuploadsize">
<value>1073741824</value>
</property>
<property name="maxinmemorysize">
<value>1073741824</value>
</property>
<property name="defaultencoding">
<value>utf-8</value>
</property>
</bean>
-->
下面正式开始前后台代码开发:
1.在页面jsp文件中,调用webuploader组件的公共文件
<link rel="stylesheet" href="static/css/webuploader.css" rel="external nofollow" />
<script type="text/javascript" src="static/js/webuploader.js"></script>
<script type="text/javascript" src="static/js/webuploader.min.js"></script>
<script type="text/javascript" src="static/js/upload3.js"></script>
页面上的控件代码:
<div id="uploader">
<!--用来存放文件信息-->
<div id="thelist"></div>
<div>
<div id="attach"></div>
<!-- <input type="button" value="上传" id="upload"/> -->
</div>
</div>
因为我用的是自动上传,所以注释了上传按钮,upload3.js里也注释了相对的上传按钮的点击方法.
2.真正的上传组件代码是upload3.js,里面介绍了webuploader的初始化,分片,各种参数,具体可以参考官网上的api
/*********************************webupload 单文件上传 begin*****************************************/
$(function(){
var $list = $("#thelist");
var uploader ;// 实例化
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( "<div id='"+ file.id + "' class='item'>" +
"<h4 class='info'>" + file.name + "</h4>" +
"<p class='state'>正在上传...</p>" +
"</div>" );
});
//当所有文件上传结束时触发
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")<span style="font-family: arial, helvetica, sans-serif;">//这里就是表明上传组件怎么通过server属性找到后端代码的,不要太在意细节</span>
public class mypracticecontroller extends basecontroller {
<span> </span>
@requestmapping(method = {requestmethod.post}, value = {"/webuploader"})
@responsebody
public void webuploader(httpservletrequest request, httpservletresponse response) throws exception {
try {
boolean ismultipart = servletfileupload.ismultipartcontent(request);
if (ismultipart) {
fileitemfactory factory = new diskfileitemfactory();
servletfileupload upload = new servletfileupload(factory);
// 得到所有的表单域，它们目前都被当作fileitem
list<fileitem> fileitems = upload.parserequest(request);
string id = "";
string filename = "";
// 如果大于1说明是分片处理
int chunks = 1;
int chunk = 0;
fileitem tempfileitem = null;
for (fileitem fileitem : fileitems) {
if (fileitem.getfieldname().equals("id")) {
id = fileitem.getstring();
} else if (fileitem.getfieldname().equals("name")) {
filename = new string(fileitem.getstring().getbytes("iso-8859-1"), "utf-8");
} else if (fileitem.getfieldname().equals("chunks")) {
chunks = numberutils.toint(fileitem.getstring());
} else if (fileitem.getfieldname().equals("chunk")) {
chunk = numberutils.toint(fileitem.getstring());
} else if (fileitem.getfieldname().equals("multifile")) {
tempfileitem = fileitem;
}
}
//session中的参数设置获取是我自己的原因,文件名你们可以直接使用filename,这个是原来的文件名
string filesysname = this.getrequest().getsession().getattribute("filesysname").tostring();
string realname = filesysname+filename.substring(filename.lastindexof("."));//转化后的文件名
this.getrequest().getsession().setattribute("realname",realname);
string filepath = const.videopathfile + "sound/";//文件上传路径
// 临时目录用来存放所有分片文件
string tempfiledir = filepath + id;
file parentfiledir = new file(tempfiledir);
if (!parentfiledir.exists()) {
parentfiledir.mkdirs();
}
// 分片处理时，前台会多次调用上传接口，每次都会上传文件的一部分到后台
file temppartfile = new file(parentfiledir, realname + "_" + chunk + ".part");
fileutils.copyinputstreamtofile(tempfileitem.getinputstream(), temppartfile);
// 是否全部上传完成
// 所有分片都存在才说明整个文件上传完成
boolean uploaddone = true;
for (int i = 0; i < chunks; i++) {
file partfile = new file(parentfiledir, realname + "_" + i + ".part");
if (!partfile.exists()) {
uploaddone = false;
}
}
// 所有分片文件都上传完成
// 将所有分片文件合并到一个文件中
if (uploaddone) {
// 得到 desttempfile 就是最终的文件
file desttempfile = new file(filepath, realname);
for (int i = 0; i < chunks; i++) {
file partfile = new file(parentfiledir, realname + "_" + i + ".part");
fileoutputstream desttempfos = new fileoutputstream(desttempfile, true);
//遍历"所有分片文件"到"最终文件"中
fileutils.copyfile(partfile, desttempfos);
desttempfos.close();
}
// 删除临时目录中的分片文件
fileutils.deletedirectory(parentfiledir);
} else {
// 临时文件创建失败
if (chunk == chunks -1) {
fileutils.deletedirectory(parentfiledir);
}
}
}
} catch (exception e) {
logger.error(e.getmessage(), e);
}
}
到这里基本完了,webuploader前后台设计的代码就这些,
uploader.swf
<pre name="code" class="html">webuploader.min.js</pre><pre name="code" class="html"><pre name="code" class="html">webuploader.js</pre><pre name="code" class="html">webuploader.css</pre><pre name="code" class="html">这4个公共文件从官网可以下载,都一样. <pre name="code" class="plain">最后,文件上传后页面样式是</pre><pre name="code" class="plain"><pre name="code" class="html"><img src="http://img.blog.csdn.net/20170418112230338?watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqvd2fuz2xvbmcxotkwndix/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70/gravity/center" alt=""> </pre> <pre></pre> <pre></pre> <pre></pre> <pre></pre> <p></p> <pre></pre> <pre></pre> <pre></pre> <pre></pre> <pre></pre> <pre></pre> <pre></pre> <pre></pre> </pre></pre></pre>
以上所述是小编给大家介绍的webuploader在springmvc+jquery+java开发环境下的大文件分片上传的实例代码，希望对大家有所帮助
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！
网友评论