<div class="article_manage clearfix">
<div class="article_l">
<span class="link_categories">
标签:
<a href="http://www.csdn.net/tag/%e6%9c%8d%e5%8a%a1%e5%99%a8" target="_blank" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_tag']);">服务器</a><a href="http://www.csdn.net/tag/%e5%88%86%e5%b8%83%e5%bc%8f%e5%ad%98%e5%82%a8" target="_blank" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_tag']);">分布式存储</a><a href="http://www.csdn.net/tag/buffer" target="_blank" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_tag']);">buffer</a><a href="http://www.csdn.net/tag/%e6%89%a9%e5%b1%95" target="_blank" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_tag']);">扩展</a><a href="http://www.csdn.net/tag/io" target="_blank" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_tag']);">io</a><a href="http://www.csdn.net/tag/flash" target="_blank" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_tag']);">flash</a>
</span>
</div>
<div class="article_r">
<span class="link_postdate">2012-04-09 13:02</span>
<span class="link_view" title="阅读次数">7727人阅读</span>
<span class="link_comments" title="评论次数"> <a href="#comments" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_pinglun'])">评论</a>(4)</span>
<span class="link_collect tracking-ad" data-mod="popu_171"> <a href="javascript:void(0);" onclick="javascript:collectArticle('基于SpringMVC文件上传服务器端进度条实现','7440483');return false;" title="收藏" target="_blank">收藏</a></span>
<span class="link_report"> <a href="#report" onclick="javascript:report(7440483,2);return false;" title="举报">举报</a></span>
</div>
</div>
<div class="embody" style="display:none" id="embody">
<span class="embody_t">本文章已收录于:</span>
<div class="embody_c" id="lib" value="{"err":0,"msg":"ok","data":[]}"></div>
</div>
<style type="text/css">
.embody{
padding:10px 10px 10px;
margin:0 -20px;
border-bottom:solid 1px #ededed;
}
.embody_b{
margin:0 ;
padding:10px 0;
}
.embody .embody_t,.embody .embody_c{
display: inline-block;
margin-right:10px;
}
.embody_t{
font-size: 12px;
color:#999;
}
.embody_c{
font-size: 12px;
}
.embody_c img,.embody_c em{
display: inline-block;
vertical-align: middle;
}
.embody_c img{
width:30px;
height:30px;
}
.embody_c em{
margin: 0 20px 0 10px;
color:#333;
font-style: normal;
}
</style>
<script type="text/javascript">
$(function () {
var lib = eval("("+$("#lib").attr("value")+")");
var html = "";
if (lib.err == 0) {
$.each(lib.data, function (i) {
var obj = lib.data[i];
//html += '<img src="' + obj.logo + '"/>' + obj.name + " ";
html += ' <a href="' + obj.url + '" target="_blank">';
html += ' <img src="' + obj.logo + '">';
html += ' <em><b>' + obj.name + '</b></em>';
html += ' </a>';
});
if (html != "") {
setTimeout(function () {
$("#lib").html(html);
/*
var testhtml = "";
testhtml += '<a href="#">';
testhtml += '<img src="http://img.knowledge.csdn.net/upload/base/1455589744328_328.jpg">';
testhtml += '<em>Android知识库</em>';
testhtml += '</a>';
$(".embody_c").html(testhtml);
*/
$("#embody").show();
}, 100);
}
}
});
</script>
<script type="text/javascript" src="http://static.blog.csdn.net/scripts/category.js"></script>
首先来看看我们系统对于文件上传功能提出来的需求:
1、能同时上传多个文件;
2、单个文件大小不超过2G;
3、要有进度条可以实时显示上传进度;
4、可以取消正在上传的文件;
5、文件上传到分布式存储系统,保证上传的效率。
一、实现普通文件上传
我们知道,类DispatcherServlet是SpringMVC的入口,在其doDispatch方法里面,我们可以看到它会先去检查有没配置multipartResolver
![点击查看原始大小图片](http://dl.iteye.com/upload/attachment/0066/0906/0c470d35-23bf-3fb4-8afc-bfde0f11c05c.png)
如果有的话会先执行它的resolveMultipart方法:
![点击查看原始大小图片](http://dl.iteye.com/upload/attachment/0066/0908/0a986c63-8b86-354d-9058-670c05a5679d.png)
因此,我们在配置文件中添加:
![点击查看原始大小图片](http://dl.iteye.com/upload/attachment/0066/0910/1750147d-dcd6-3be6-8ebb-7bcf90391396.png)
二、实现进度条
现在实现带进度条的文件上传一般都是在客户端用flash上传组件计算,或者是通过客户端插件的方式。前者上传组件有大小的限制,后者对于我们系统来说实现过于复杂,开发难度稍大。因此我们采用服务器端计算文件上传进度,客户端轮询的方式。
Commons-fileupload组件自带了文件上传进度的监听器,类FileUploadBase提供了它的set方法:
![](http://dl.iteye.com/upload/attachment/0066/0912/8fc83ffe-3eef-3149-bc75-f5ca459bb90d.png)
ProgressListener是一个接口,我们需要自己实现它的update方法,参数pBytesRead表示已经上传到服务器的字节数,pContentLength表示所有文件的总大小,pItems表示第几个文件:
![](http://dl.iteye.com/upload/attachment/0066/0914/612caccd-23cb-332b-aa68-cf7358948af6.png)
SpringMVC没有实现监听器,所以如果要监听的话得自己扩展CommonsMultipartResolver类,在newFileUpload里面加入代码设置自己实现的监听器:
![点击查看原始大小图片](http://dl.iteye.com/upload/attachment/0066/0916/be7e8289-0324-3fc1-880f-0f676ff9bcc5.png)
ServletFileUploadExt是对ServletFileUpload类进行的扩展,后面会提到。这样在文件上传的过程中,监听器将得到通知已上传的字节数:
![](http://dl.iteye.com/upload/attachment/0066/0918/a2624778-70bc-3f9b-8d61-cd84055d5f4b.png)
![](http://dl.iteye.com/upload/attachment/0066/0920/c3ed7f17-503b-3c38-a639-29c7611830c4.png)
三、上传到分布式存储系统
通过阅读commons-fileupload的源码我们知道实际文件上传发生在FileUploadBase类parseRequest(RequestContext ctx)方法里面:
因此我们可以通过继承ServletFileUpload(该类继承自FileUpload)类重写parseRequest方法来实现我们自己的存储方式。这里有个地方需要注意的,一般文件保存到分布式存储系统中,为了减少IO次数,需要实现本地的buffer,等buffer满了后再上传上去:
但是因为commons-fileupload组件本身有个buffer,而且buffer大小为4096:
因此按照上面实现的话不管自己定义多大的buffer,一次IO传上去的实际不到4096字节(减去http头信息等),我们需要用扩展了BufferedInputStream的类包装下:
BufferedInputStreamExt主要对read方法做了一些修改:
去掉了BufferedInputStream类该方法的几条语句,因为在上传组件自带buffer的情况下,读一次后input.available()会为0,此处会导致提前返回而不能把自定义的buffer读满:
四、取消文件上传
取消文件上传实现方式为上传时保存上传输入流的引用,取消时关闭流,让输入流产生IO异常或者数组越界异常,同时捕获这些异常,则可取消文件上传。
五、总结&改进
由于SpringMVC上传的时候并不能得到单个文件的大小,配置文件限制的大小也是所有文件的大小,非单个文件大小,监听的也是整体文件上传的进度。所以在客户端可以做一些改进,比如模拟一次可以上传多个文件,但实际上传时只上传单个文件,等第一个文件上传完毕后再依次发请求上传第二第三个文件。
<div id="digg" articleid="7440483">
<dl id="btnDigg" class="digg digg_enable" onclick="btndigga();">
<dt>顶</dt>
<dd>0</dd>
</dl>
<dl id="btnBury" class="digg digg_enable" onclick="btnburya();">
<dt>踩</dt>
<dd>1</dd>
</dl>
</div>
<div class="tracking-ad" data-mod="popu_222"><a href="javascript:void(0);" target="_blank"> </a> </div>
<div class="tracking-ad" data-mod="popu_223"> <a href="javascript:void(0);" target="_blank"> </a></div>
<script type="text/javascript">
function btndigga() {
$(".tracking-ad[data-mod='popu_222'] a").click();
}
function btnburya() {
$(".tracking-ad[data-mod='popu_223'] a").click();
}
</script>
<div style="clear:both; height:10px;"></div>