基于SpringMVC文件上传服务器端进度条实现

基于SpringMVC文件上传服务器端进度条实现

<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>

文件上传应该大部分人都接触过，一般都是基于commons-fileupload组件来实现，SpringMVC的文件上传功能也是在commons-fileupload组件提供的功能上面做了一些包装功能，使文件上传开发更容易方便。

首先来看看我们系统对于文件上传功能提出来的需求：

1、能同时上传多个文件；

2、单个文件大小不超过2G；

3、要有进度条可以实时显示上传进度；

4、可以取消正在上传的文件；

5、文件上传到分布式存储系统，保证上传的效率。

一、实现普通文件上传

我们知道，类DispatcherServlet是SpringMVC的入口，在其doDispatch方法里面，我们可以看到它会先去检查有没配置multipartResolver



如果有的话会先执行它的resolveMultipart方法：



因此，我们在配置文件中添加：


则可使用SpringMVC自带的CommonsMultipartResolver实现多个文件上传的功能。

二、实现进度条

现在实现带进度条的文件上传一般都是在客户端用flash上传组件计算，或者是通过客户端插件的方式。前者上传组件有大小的限制，后者对于我们系统来说实现过于复杂，开发难度稍大。因此我们采用服务器端计算文件上传进度，客户端轮询的方式。

Commons-fileupload组件自带了文件上传进度的监听器，类FileUploadBase提供了它的set方法：



ProgressListener是一个接口，我们需要自己实现它的update方法，参数pBytesRead表示已经上传到服务器的字节数，pContentLength表示所有文件的总大小，pItems表示第几个文件：



SpringMVC没有实现监听器，所以如果要监听的话得自己扩展CommonsMultipartResolver类，在newFileUpload里面加入代码设置自己实现的监听器：



ServletFileUploadExt是对ServletFileUpload类进行的扩展，后面会提到。这样在文件上传的过程中，监听器将得到通知已上传的字节数：





三、上传到分布式存储系统

通过阅读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上传的时候并不能得到单个文件的大小，配置文件限制的大小也是所有文件的大小，非单个文件大小，监听的也是整体文件上传的进度。所以在客户端可以做一些改进，比如模拟一次可以上传多个文件，但实际上传时只上传单个文件，等第一个文件上传完毕后再依次发请求上传第二第三个文件。








document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000)

<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>

上一篇KindEditor 4.x 在线编辑器常用方法小结

下一篇C++ 程序员必读书目清单

<div style="clear:both; height:10px;"></div>